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