WordPress Temanıza CSS Hayalet Düğmeleri Nasıl Eklenir

Yakın zamanda okuyucularımızdan biri, WordPress temalarına CSS Hayalet düğmeleri ekleme konusunda bir eğitim istedi. Hayalet düğmeler, günümüzde çok popüler olan şeffaf harekete geçirici mesaj düğmeleridir. Bu makalede, çok az CSS ve HTML kullanarak WordPress temanıza CSS Hayalet düğmelerini nasıl kolayca ekleyebileceğinizi göstereceğiz.

Hayalet Düğme Nedir?

Hayalet düğme, arka planlarına karışan ve yalnızca çevrelerindeki kenarlıkla fark edilen şeffaf düğmeler için kullanılan bir web tasarım terimidir.

WordPress'te normal eylem çağrısı düğmeleri oluşturmak oldukça kolaydır. Hatta bunları CSS veya HTML yazmadan gönderilerinize ve sayfalarınıza ekleyebilirsiniz. Hayalet düğmeler yeni bir trend olduğu için, yalnızca hayalet tarzında düğmeler oluşturmak için özel eklentiler bulunmamaktadır.

WordPress'te Hayalet Düğmeler Ekleme

Daha önce de belirtildiği gibi, WordPress temanıza hayalet düğmeler eklemek için biraz CSS ve HTML kullanmanız gerekecek.

İlk yapmanız gereken, aşağıdaki CSS kodunu temanızın veya alt temanızın stil sayfasına eklemektir.

Web sunucunuza bağlanmak için bir FTP istemcisine ihtiyacınız olacak. Bağlandıktan sonra, /wp-content/themes/Your-Theme/ klasörüne gidin ve style.css dosyasını bulun. Bu dosyayı bir metin düzenleyicide düzenlemek için açın ve ardından bu kod parçasını dosyanın altına yapıştırın. (WordPress'te web'den kod parçacıkları yapıştırma hakkında daha fazla bilgi edinin).

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

Değişikliklerinizi kaydedin ve dosyayı sunucuya geri yükleyin.

Artık düğmeyi görüntülemek istediğinizde tek yapmanız gereken class=”ghost-button” eklemektir.

Örneğin, bir indirme bağlantısı eklemek istiyorsanız, indirme bağlantınızı normalde yapacağınız gibi oluşturun. Ardından, HTML biçimlendirmesini görmek için Metin düzenleyiciye geçin.

İndirme bağlantınızın HTML kodunu bulun ve CSS sınıfını şu şekilde ekleyin:

<a href="http://example.com/downloads/" class="ghost-button">Şimdi İndirin</a>

Gönderinizi kaydedin veya güncelleyin ve ardından önizlemesini yapın. Eski düz bağlantı yerine güzel bir hayalet düğme göreceksiniz.

Bu makalenin WordPress temanıza hayalet düğme eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca kısa kod kullanmadan WordPress'e düğme ekleme rehberimize de bakmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.