Sadece CSS ile HTML5 Hareketli Buton nasıl hazırlanır?

Günümüz web tasarımı trendlerinden biri de Türkçe karşılığıyla hareketli 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 hareketli butonların tasarımını oluşturacağız.

Sadece CSS ile HTML5 Hareketli Buton 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 :

Hareketli Aşağı

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

Hareketli Yukarı

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 Fontsların tüm listesi için 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.hareket{
  display:table;
  float:left;
  margin-left:10px;
  background-color:transparent;
  background-image: linear-gradient(to bottom,transparent 50%, white 50%);
  background-size: 100% 200%;
  font:300 18px 'Roboto', sans-serif;
  letter-spacing:2px;
  color:white;
  border:1px solid white;
  border-radius:35px;
  padding:15px 45px;
  text-decoration:none;
  margin-top:100px;
  transition:background-position 0.6s,color 0.6s,box-shadow 0.6s,margin-top 0.6s;
}
 
a.hareket.yukari{
  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.
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.hareket:hover{
  margin-top:75px;
  color:#536DFE;
  background-position: 0 -100%;
  box-shadow: 0 15px 25px 5px rgba(1,1,1,0.3);
}
 
a.hareket.yukari:hover{
  color:white;
  background-position: 0 -100%;
  box-shadow: 0 15px 25px 5px rgba(1,1,1,0.3);
}

Evet Hepsi Bu Kadar. Dilerseniz aşağıdaki örnekte kodları değiştirerek denemeler yapabilirsiniz. Takıldığınız yer olursa yorum yapabilrsiniz.