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

Geçtiğimiz günlerde okuyucularımızdan biri bizden WordPress temalarına CSS Hayalet butonların nasıl ekleneceğine dair bir eğitim istedi. Hayalet butonlar bugünlerde çok popüler olan şeffaf harekete geçirici mesaj butonlarıdır. 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 etraflarındaki kenarlıkla fark edilebilen şeffaf düğmeler için kullanılan bir web tasarım terminolojisidir.

WordPress ‘te normal eylem çağrısı düğmeleri oluşturmak oldukça kolaydır. Hatta bunları CSS veya HTML yazmadan yazılarınıza ve sayfalarınıza ekleyebilirsiniz. Hayalet butonlar yeni bir trend olduğundan, sadece hayalet tarzında butonlar oluşturmak için özel bir eklenti yoktur.

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 gerekecektir.

İ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. Bir metin düzenleyicide düzenlemek için bu dosyayı açın ve ardından bu kod parçacığı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, normalde yaptığınız gibi indirme bağlantınızı oluşturun. Ardından, HTML biçimlendirmesini görmek için Metin düzenleyicisine geçin.

İndirme bağlantınızın HTML kodunu bulun ve CSS sınıfını aşağıdaki gibi ekleyin:

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

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

Umarız bu makale WordPress temanıza nasıl hayalet düğme ekleyeceğinizi öğrenmenize yardımcı olmuştur. WordPress’te kısa kod kullanmadan düğme eklemehakkındaki rehberimizi de görmek isteyebilirsiniz

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