Websayfamıza Css download butonu


css buton yapalım
Eğer Bir web sayfanız var ve birşeyleri downloada sunuyorsanız yada en azından download linki veriyorsanız bir download butonuna ihtiyacınız olacaktır , elbette üzerinde download yazan bir resme

link vererek bu işi yapabilirsiniz fakat butonunuzun daha şık birşey olmasını ve üzerine basıldığında gerçek bir buton gibi efektleri olmasını istiyorsanız .css kodlamasından faydalanmanızı öneririm , peki ben .css den anlıyormuyum - Hayır , sadece böyle bir butonun işime yarayacağını düşündüm ve online css button generator olarak googlede arattım karşıma çıkan birkaç tanesinden beğendiğim bir butonu gözüme kestirdim (Aşağıdaki resim)

3d_css_butonlar

Eğer CMS olarak (içerik yönetim sistemi) WordPress kullanıyorsanız ve sayfalarınızda üstteki şekilde bir 3D buton kullanmak istiyorsanız işte nasılı:

1. Bu tarz bir Css butonu eklemek iki kısımdan oluşuyor a) Css kodları b) Html kodları , biz ilk önce css kodlarını alacağız bunun için Buradaki sayfayı açalım , sol panel Html , sağ panel ise css kodlarını içerir

2. Css kısmını sağ tıklayalım ve tümünü seç diyelim (Aşağıdaki resim)

css ve html kodları

daha sonra Temamızın bulunduğu klasöre gidelim , bu genellikle aşağıdaki yoldadır

wp-content\themes\Temanızın ismi

burada eğer custom.css isminde bir dosyanız varsa az önce kopyaladığımız kodu buraya (tema hakkındaki birkaç satırdan sonra) yapıştıralım eğer yoksa style.css nin sonuna yapıştıralım.

3. Son olarak istediğimiz renk butonu sayfamızda istediğimiz bir yere aşağıdaki kod ile yerleştirelim

<a href="#" class="button blue">Download</a>

elbette siz istediğiniz başka bir renk butonu seçebilirsiniz ben üstte mavi butonu tercih ettim , peki download linki nereye gelecek derseniz ? kodda href ten sonraki tırnak içine href="Download linki buraya gelecek" , eğer örnek bir uygulama görmek isterseniz Buradaki linki ziyaret ediniz

Not: Eğer bu butonu normal bir HTML sayfasına yerleştirecekseniz style.css ye < head > kısmından link vermeniz gerektiğini unutmayın


Yorum Ekle

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Captcha