wordpresstr
Administrator
- 125
- 13 Kas 2020
Öncelikle yapmanız gereken aşağıdaki CSS kodunu temanıza 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.
Değişikliklerinizi kaydedin ve dosyayı sunucuya geri yükleyin.
Şimdi düğmeyi ne zaman görüntülemek isterseniz 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üzenleyiciye geçin.
İndirme bağlantınız için HTML kodunu bulun ve aşağıdaki gibi CSS sınıfını ekleyin:
<a href="http://example.com/downloads/" class="ghost-button">Download Now</a>
Gönderinizi kaydedin veya güncelleyin ve ardından önizleyin. Sade eski bağlantı yerine güzel bir hayalet düğmesi göreceksiniz.
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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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; } |
Şimdi düğmeyi ne zaman görüntülemek isterseniz 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üzenleyiciye geçin.
İndirme bağlantınız için HTML kodunu bulun ve aşağıdaki gibi CSS sınıfını ekleyin:
<a href="http://example.com/downloads/" class="ghost-button">Download Now</a>
Gönderinizi kaydedin veya güncelleyin ve ardından önizleyin. Sade eski bağlantı yerine güzel bir hayalet düğmesi göreceksiniz.