Zeki Can - WordPress

  CSS, HTML

Demo ve İndir Butonları Oluşturma

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.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar