CSS ile Ghost Button nasıl hazırlanır?

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.

ÖRNEĞİ GÖRÜNTÜLE


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 a etiketi 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 :

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

Açık bir zaminde çalışacak iseniz de aşağıdaki kodu kullanabilirsiniz :

<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. Google Web Fonts hakkında daha fazla bilgi almak isterseniz de burayı tıklayın.

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700&subset=latin-ext';

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

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ğız.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #8

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.

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.


Bitirmeden Önce

Eğer bu örnek üzerinde denemeler yapmak istiyorsanız buradaki CodePen linkine gidebilir, istediğiniz değişiklikleri canlı olarak yapabilirsiniz. Sorularınızı ise yorum alanından bize iletmekten çekinmeyin.

İyi çalışmalar.