Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Creating Ghost Buttons using CSS

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.

Example of a ghost button next to a normal button

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

5 yorumBir Cevap Bırakın

  1. 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!

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

  3. Dinesh Fernando

    Thanks, useful code – worked nicely on a live project.

  4. shravan upadhayay

    Great post . thanx for sharing.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.