Merhaba arkadaşlar. Bu yazımda css3 ile hazırlanarak yapılmış butonları web sitemizde nasıl kullanıcaz onu göstericem. Bu tarz buton tasarımlarını kendimizde yapabiliriz ancak hazıra yatmak demiyelimde şimdilik hazırı nasıl kullanıcağımızı anlatalım çünkü merak eden arkadaşlar var.
CSS3 Slick Button
Öncelikle bu butonlarımızın demo sayfada nasıl göründüğüne bakalım. Üzerine gelindiğinde ne oluyor? Tıklandıktan sonra neler oluyor hep beraber görelim.
Evet arkadaşlar şimdi bu butonları web sitemizde nasıl kullanıcaz onu anlatalım. Öncelikle kullandığınız style.css stil dosyasını notepad++ ile açın ve en alta alttaki kodları ekleyin.
.button { color: #fff; padding: 8px 14px 10px; background-color: #bc1815; border: none; margin-right: 25px; position: relative;;
-webkit-user-select: none;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.button:active { position: relative; top: 3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }
.button.blue { background: #22C3EB; }
.button.green { background: #67b600; }
.button.orange { background: #da8a00; }
.button.yellow { background: #b3a400; }
.button.turquoise { background: #00b1af; }
.button:last-of-type { margin: 0; }
.button.gradient {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgba(0,0,0,0.3)),
color-stop(1, rgba(255,255,255,0.2))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(0,0,0,0.3) 1%,
rgba(255,255,255,0.2) 100%
);
background-image: gradient(
center bottom,
rgba(0,0,0,0.3) 1%,
rgba(255,255,255,0.2) 100%
);
}
.button.gradient:hover {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgba(0,0,0,0.45)),
color-stop(1, rgba(255,255,255,0.3))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(0,0,0,0.45) 1%,
rgba(255,255,255,0.3) 100%
);
background-image: gradient(
center bottom,
rgba(0,0,0,0.45) 1%,
rgba(255,255,255,0.3) 100%
);
}
Şimdi arkadaşlar demo sayfasında gördüğünüz tüm düğmeleri kullanabiliceksiniz. Peki Nasıl?
Demo sayfasında üst ve alttaki butonları gördünüz. Öncelik olarak üsttekilerini nasıl kullanıcaz onu anlatıyorum
<a href="#" class="button">Kırmızı buton</a>
<a href="#" class="button blue">Mavi buton</a>
<a href="#" class="button green">Yeşil buton</a>
<a href="#" class="button orange">Turuncu buton</a>
<a href="#" class="button yellow">Sarı buton</a>
<a href="#" class="button turquoise">Turkuaz buton</a>
Yukarıdaki kodlardan anlayacağınız gibi linklere class’ları yerleştiriceksiniz. Hangi renk için hangi class uygulamanız gerekiyor yukarıda yazılıyor.
Şimdi ise aşağıdaki kodları nasıl kullanıcaz onu anlatıyorum.
<a href="#" class="button gradient">Kırmızı buton</a>
<a href="#" class="button blue gradient">Mavi buton</a>
<a href="#" class="button green gradient">Yeşil buton</a>
<a href="#" class="button orange gradient">Turuncu buton</a>
<a href="#" class="button yellow gradient">Sarı buton</a>
<a href="#" class="button turquoise gradient">Turkuaz buton</a>
Demo’da aşağıdaki butonları eklemek için ise yukarıdaki class’ları kullanıyoruz. CSS bilginiz varsa class’larıda, renkleride değiştirebilirsiniz.
