Türk Samp Platformu-Yenilendik
MyBB Kitabı - Türkçe MyBB Destek
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ile Ghost Button nasıl hazırlanır?

#1
Vrb5kq.gif

Günümüz web tasarımı trendlerinden biri de Türkçe karşılığıyla hayalet butonlar.
Literatüre göre ghost button, web sayfalarının birincil aksiyonuna kullanıcıları taşımakla ilişkilendirilmiş. Ayrıca çizgisel ve şık bir tasarıma sahip bu butonlar sitenizin cazibesini arttırmanıza yardımcı olacaktır.
Bu dersimizde sizlerle birlikte CSS kullanarak iki adet ghost button tasarımı oluşturacağız.
Sadece CSS ile HTML5 Ghost Button nasıl hazırlanır?
Örneğimizi hem koyu zeminler hem de açık renk zeminlerde çalışacak şekilde hazırlamakta fayda var. Kodlarımız içerisinde geçecek olan inverted classı açık renk zeminler için olan versiyonu olacak. Makalenin başından beri buton diye çağırıyoruz ancak burada kullanacağımız elemanın tipi anchor olacak. Yani button değil aetiketi kullanacağız. Bunun sebebi daha popüler ve kolay kullanılabilir olması.

Hazırsanız başlayalım.

HTML Kodları

HTML tarafında çok fazla bir işimiz yok. Eğer koyu renk bir zeminde çalışıyorsanız aşağıdakini :



Kod:
<a class="ghost" href="#">Ghost Button</a>
Açık bir zaminde çalışacak iseniz de aşağıdaki kodu kullanabilirsiniz :


Kod:
<a class="ghost inverted" href="#">Ghost Button</a>


CSS Kodları

Tasarımda şık ve okunulabilirliği yüksek olan Roboto fontunu kullandık. Eğer web sitenizde yüklü değilse ilgili CSS dosyanızın en üstüne aşağıdaki satırı ekleyerek başlayın

Şimdi varsayılan buton tasarımımızı yapalım. Daha sonrada inverted versiyonumuzun normal halini çizelim.




Kod:
a.ghost{
 display:table;
 background-color:transparent;
 background-image: linear-gradient(to bottom,transparent 50%, white 50%);
 background-size: 100% 200%;
 text-transform: uppercase;
 font:300 18px 'Roboto', sans-serif;
 letter-spacing:2px;
 color:white;
 border:1px solid white;
 border-radius:35px;
 padding:15px 45px;
 text-decoration:none;
 transition:background-position 0.6s,color 0.6s,box-shadow 0.6s,margin-top 0.6s;
}

a.ghost.inverted{
 background-image: linear-gradient(to bottom,transparent 50%, #536DFE 50%);
 color:#536DFE;
 border:1px solid #536DFE;
}


Dikkat ettiyseniz arkaplan resmi için linear-gradient belirledik. Böylece yarısı transparan yarısı da renkli olan bir planımız oluyor. Daha sonra da üstlerine gelindiğinde bunları yukarı aşağı kaydırabilir olacağız. Tabii bu işlem için de background-position özelliğini kullanacağ
Ayrıca tüm geçiş efektlerimizin biraz daha yumuşak olması için 600 milisaniyelik bir transition efekti uyguluyoruz.

Üstlerine gelince (:hover) nasıl bir tasarıma bürüneceklerini hazırlayalım.



Kod:
a.ghost:hover{
 margin-top:-20px;
 color:#536DFE;
 background-position: 0 -100%;
 box-shadow: 0 15px 25px 5px rgba(1,1,1,0.3);
}

a.ghost.inverted:hover{
 color:white;
 background-position: 0 -100%;
 box-shadow: 0 15px 25px 5px rgba(1,1,1,0.3);
}

Bu kadar..

ÖNİZLEME
Kod:
https://codepen.io/lykiadesign/pen/dmxWYE
Savaşı seçtin, ne olacaksa olacak ve ne olacağını bilmiyoruz. Sadece tanrı biliyor.
( Cengiz Han )
---------------------------
---------------------------
Metto - Xeon - Yunus Y. - #Lykia
WWW
Cevapla
Teşekkür verenler: Escobar-O , yusufkoc , arvoX

Şu anda bu konuyu okuyanlar: 1 Ziyaretçi

Hızlı Menü:

  • Gece
  • Normal


  • ***