CSS3 Web Site butonu yapmak 0

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.

https://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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Basit Youtube Açılır Menü Ücretsiz indir 0

Bugün gördüğüm güzel bir açılır menü kaydettim sizlerle paylaşmak için. Youtube’de bu tarz bir menü olduğunu söylemiş ancak ben göremedim fazla kullanmadığımdan olabilir. Her neyse sizde bu menüyü indirip deneyin çok güzel.

https://1.bp.blogspot.com/-r-GUO4hWaJ4/UXmcEVXix0I/AAAAAAAARDE/D-ThQy2VMzk/s1600/acilir-menu.jpg

Simple Youtube Menu Effect

Eğitici olarak yapılmış bir menü bu arkadaşlar. Sizde bunun nasıl yapıldığını altta verdiğim linkten araştırabilirsiniz. Çok zor bir olayı yok aslında mantığı anlatılıyor.

Ufak bir jquery fonksiyonuda var onuda çalıştırdınızmı tamamdır.

Demo / Download

Ücretsiz HTML5/CSS3 Esnek Web Site Temaları 0

HTML5 ve CSS3 Kullanılarak yapılmış güzel web site temaları paylaşıcam temalar esnek genişlikli temalar yani responsive dediğimiz teknoloji 🙂 css3 ile sayfa genişliği alarak siteyi şekillendirebiliyorsunuz işte bu temalardada bu kullanılmış.

Temaların en büyük özelliği ise tamamiyle ücretsiz olması indirin kullanın hatta çok beğenirseniz WordPress’e uyarlayabilirsiniz. Bunlardan WordPress teması yapmak istiyorum diyorsanız (WordPress Teması Yaparken Kullandığım Kodlar) bu yazımı kesinlikle inceleyin.

https://2.bp.blogspot.com/-R55RkNXABRU/UWWwYIHDoeI/AAAAAAAAQ-s/L6YAmkRPVfQ/s1600/ESCAPE+VELOCITY-rooteto.com.jpg

ESCAPE VELOCITY : Demo / Download

ASTRAL Template

https://4.bp.blogspot.com/-lboLMpC4tSU/UWWwXXN7z0I/AAAAAAAAQ-g/XYyRxO8grZo/s1600/ASTRAL-rooteto.com.jpg

ASTRAL : Demo / Download

STRIPED Template

https://2.bp.blogspot.com/-9gc--xUZxYM/UWWwZAyRgtI/AAAAAAAAQ_Q/HSLtu_0kY_c/s1600/STRIPED-rooteto.com.jpg

STRIPED : Demo / Download

DOPETROPE Template

https://2.bp.blogspot.com/-G1rkVMEQAN4/UWWwXt8bMJI/AAAAAAAAQ-k/Fzo7iiEYltg/s1600/DOPETROPE-rooteto.com.jpg

DOPETROPE : Demo / Download

MINIPORT Template

https://4.bp.blogspot.com/-VCufoohQZS8/UWWwYwZmojI/AAAAAAAAQ_E/U_b6iNBt_u0/s1600/MINIPORT-rooteto.com.jpg

MINIPORT : Demo / Download

TXT Template

https://2.bp.blogspot.com/-vwJeO5Ucbko/UWWwZWGMtuI/AAAAAAAAQ_M/Y7ztpv8cwLk/s1600/TXT-rooteto.com.jpg

TXT : Demo / Download

İLGİNİZİ ÇEKEBİLİR: 50 Ücretsiz (Free) CSS/(X)HTML Templates

VERTI Template

https://4.bp.blogspot.com/-jA1EidlJTsk/UWWwZn9iKnI/AAAAAAAAQ_Y/qAsRJrHdDOI/s1600/VERTI-rooteto.com.jpg

VERTI : Demo / Download

ZEROFOUR Template

https://1.bp.blogspot.com/-s7FYRxTR2A0/UWWwaHVXAMI/AAAAAAAAQ_o/jHYHZVOjtXQ/s1600/ZEROFOUR-rooteto.com.jpg

ZEROFOUT : Demo / Download

ARCANA Template

https://1.bp.blogspot.com/-KL3g-7vmzOc/UWWwXR6U8zI/AAAAAAAAQ-o/wOgEVAxYUcE/s1600/ARCANA-rooteto.com.jpg

ARCANA : Demo / Download

HALCYONIC Template

https://3.bp.blogspot.com/-YZo87IJnDzs/UWWwYWlCWLI/AAAAAAAAQ-4/7_0-DO0-qaM/s1600/HALCYONIC-rooteto.com.jpg

HALCYONIC : Demo / Download

MINIMAXING Template

https://4.bp.blogspot.com/-g8GEmjHMSi8/UWWwYSK-SJI/AAAAAAAAQ-8/9U6O7N_YiKY/s1600/MINIMAXING-rooteto.com.jpg

MINIMAXING : Demo / Download

 

Most Popular Topics

Editor Picks