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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
mahmut tanık
Hi , thanks for great sharings. I’ve researching for a long time.
How can i add customization button on my wp website ? Customization button i mean see on theme demo sites right or left side there is a button when click you can change theme style or color .
WPBeginner Support
Hi Mahmut,
In most WordPress themes you can do that by visiting theme’s options page or by visiting Appearance » Customize page in WordPress admin area.
Yönetici
Dinesh Fernando
Thanks, useful code – worked nicely on a live project.
shravan upadhayay
Great post . thanx for sharing.