Renkli Css Butonları

Photoshop kullanmadan Facebook Twitter ve benzeri çok güzel, Renkli Css Butonları kopyala yapıştır.

Benim gibi bir çok webmaster Renkli Button hazırlamak için yıllarca Photoshop kullandık, birsürü uğraş verdik. Hazırlanan butonu tam oldu derken ya boyutunda sorun çıkması yada renklerin uyuşmaması veya ilerde değişmek istediğimiz butonları tekrar aynı işlevleri tekrarlayarak sinirlerimizin gerilmesine yol açtı. Ben bu işe bir son vermek istiyorum; ve herkesin işini kolaylaştırmak için sana Photoshop kullanmadan Renkli Css Butonları nasıl yapılır onu gösteriyorum.

Buton Özellikleri

Resim Kullanmadan Renkli Css Butonları
Boyut ve Renkleri Dilediğin Şekilde Değiştir
Kodları Kopyala Yapıştır
Facebook Renkli Css Buton
Twitter Renkli Css Buton

Renkli Css Butonları Kodlarını Kopyala Yapıştır

CSS Renkli Buton Demo #1 – İlham Kaynağı Twitter

Örnek Buton #1

CSS Kodu Buton #1

<style type="text/css">
.styled-button-1 {
	-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 0px 0px;
	background-color: #FA2;
	border-radius: 5px;
	border-bottom-color: #333;
	border: none;
	border-width: 0;
	box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 0px 0px;
	color: #333;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	height: 32px;
	padding: 4px 16px;
	text-shadow: #FE6 0px 1px 0px;
}
</style>

CSS Renkli Buton Demo #2

Örnek Buton #2

CSS Kodu Buton #2

<style type="text/css">
.styled-button-2 {
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
	background-color: #7cceee;
	border-radius: 5px;
	border-bottom-color: #333;
	border: 1px solid #61c4ea;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
	color: #333;
	font-family: 'Verdana', Arial, sans-serif;
	font-size: 14px;
	text-shadow: #b2e2f5 0px 1px 0px;
	padding: 5px;
}
</style>

CSS Renkli Buton Demo #3

Örnek Buton #3 – Facebook Tarzı

CSS Kodu Buton #3

<style type="text/css">
.styled-button-3 {
	-webkit-box-shadow: rgba(0, 0, 0, 0.0.97) 0px 1px 0px 0px;
	background-color: #5B74A8;
	border: 1px solid #29447E;
	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 6px;
	height: 28px;
	color: #fff;
	border-radius: 5px;
}
</style>

CSS Renkli Buton Demo #4

Örnek Buton #4

CSS Kodu Buton #4

<style type="text/css">
.styled-button-4 {
	-webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 0px 0px;
	background-color: #EEE;
	border: 1px solid #999;
	color: #666;
	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, Sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 6px;
	height: 28px;
}
</style>

CSS Renkli Buton Demo #5

Örnek Buton #5

CSS Kodu Buton #5

<style type="text/css">
.styled-button-5 {
	background-color: #ed8223;
	color: white;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 18px;
	line-height: 30px;
	border-radius: 20px;
	border: 0px;
	text-shadow: #C17C3A 0px -1px 0px;
	width: 120px;
	height: 32px;
}
</style>

“ Bu harika Renkli Css Butonlar arasında birde Twitter’den ilham aldığım Buton ve Facebook tarzı Buton Bulunuyor. İşi bilmeyenler için hatırlatırım! Renkleri değiştirmek için ” color: #333; ” boyutlarını değiştirmek için ise ”height” ve ”witdh” kodlarında oynama yapabilirsin. ”

Diğer konu başlıkları..

Seo Dahisi Ben

Site Sahibi: Hayata

1978 Almanya Doğumlu, şu an Kayseride yaşıyor. Yaklaşık 7 Senedir Sesli Sohbet artı Sesli Chat Site kurucusu ve geliştiricisi, eş zamanda Türkiyen'in en Tecrübeli Seo & Wordpress dahisi. hayata – Acayipsin Sitesine 48 mesaj yazmıştır.

Sesli Siteler...

Sesli Sohbet
Sesli Chat
Sohbet Siteleri
Bedava Chat

Ben Nerdeyim!

Sesli Sohbet Sitemize Hoşgeldiniz!

100% Gerçek Bay Bayan Sesli Sohbet ve Arkadaşlık Sitesi!

CANAN TARKAN AYSUN BURAK DEMET

Css Butonları