MENU

CSS3 Web Site butonu yapmak

Anasayfa » CSS / CSS3 » CSS3 Web Site butonu yapmak
CSS3 Web Site butonu yapmak

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.

http://2.bp.blogspot.com/-79bcoA1zbys/T3N7Aa4huxI/AAAAAAAAGhU/XtGD5yDfImk/s1600/css3-slick-button.JPG

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.

CSS3 Butonlaro Demo sayfası

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.

Kaynak: Create a Slick CSS3 Button with box-shadow and rgba

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.