Zeki Can - WordPress

  CSS, HTML

Demo ve İndir Butonları Oluşturma

  CSS, HTML    19 Mayıs 2019
Yorum Yok

Konu içeriklerinde kullanılmak üzere hazırladığım İndir ve Demo butonları. Bu butonları kendinize göre düzenleyebilirsiniz.

WordPress bloglarda kullanmak için tekrar kullanılabilir butonlara ekleyebilir ve lazım olduğundan blog ekle diyerek butonları konumlandırabilirsiniz.

İlk olarak aşağı da verdiğim stil kodlarını style.css dosyanızın en altına eklemelisiniz. Bu kodları eklemenin iki yolu var. Bunlardan ilkini daha önce Style.Css Dosyası nerededir ? adlı yazımda paylaşmıştım. İkincisi ise WordPress admin panelde Görünüm >>> Özelleştir bölümünü kullanarak eklemek. Özelleştir sayfasını açtığınız da en altta yer alan Ek Css bölümünü kullanabilirsiniz. Altta verdiğim kodları ilk olarak ya style.css dosyanıza ya da Görünüm >>> Özelleştir >>> Ek CSS bölümüne yapıştırın.

.indirbutonu {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.indirbutonu:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.demobutonu {
  background: #ff8e42;
  background-image: -webkit-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -moz-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -ms-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -o-linear-gradient(top, #ff8e42, #ff6600);
  background-image: linear-gradient(to bottom, #ff8e42, #ff6600);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.demobutonu:hover {
  background: #ff7d26;
  background-image: -webkit-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -moz-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -ms-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -o-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: linear-gradient(to bottom, #ff7d26, #ff8e42);
  text-decoration: none;
}

Sonrasında butonları eklemek için konularınızın altına geldiğiniz de Özel HTML ya da Paragraf blogu seçin. HTML Olarak düzenle diyerek kodları bu bölümlere yapıştırın. Yan yana biri Demo Butonu Diğeri İndir Butonu olacak.

İncele İndir

<p style="text-align:center"><a class="demobutonu" href="https://zekican.net/" target="_blank" title="ZekiCan.Net Temayı Dene !" rel="noopener noreferrer">İncele</a> <a class="indirbutonu" href="https://www.zekican.net/wordpress" target="_blank" title="ZekiCan.Net Temayı İndir !" rel="noopener noreferrer">İndir</a></p>

Üstteki şekilde iki adet yan yana butonlarımız oluşacaktır. Bu butonların renklerini kendinize göre ayarlamak için background değerlerine istediğiniz rengin Hex kodunu yazmanız yeterli olacaktır. Göze Hoş Gelen Hex Renk Kodlarını incelemek isterseniz konumuzu inceleyebilirsiniz.

37 okunma

Etiketler : , , , , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

  Arama Yap

  Arşivler