CSS Buton Yapıcısı - CSS Button Generator

CSS hakkında yardım alabilir ve paylaşımlarınızı yapabilirsiniz.
Cevapla
Kullanıcı avatarı
Gökhan
Deneyimli Üye
Deneyimli Üye
Mesajlar: 390
Kayıt: 11 Şub 2009, 22:57

CSS Buton Yapıcısı - CSS Button Generator

Mesaj gönderen Gökhan » 08 Eki 2012, 13:38

Siteleriniz için CSS ve son derece güzel görünüşlü ve kullanışlı butonlar oluşturmak için aşağıdaki linki ziyaret edebilirsiniz.

Sitenin Adresi : http://www.cssbuttongenerator.com/

Bir çok hazır renk temasından sitenize uygun temayı seçip ön izleme butonunun üzerine tıkladığınızda, alt kısımda gerekli kodlar hemen oluşuyor.

Tek yapmanız gereken, oluşan 3 adet css bloğunun ismini kendinize uygun olarak düzenlemeniz (Baştan .classname olarak oluşuyor) ve kodu css dosyanıza yapıştırmanız.

Oluşturduğunuz özellikte butonu sitenizde görüntülemek için butonun class özelliğine verdiğiniz ismi yazabilirsiniz.

Örnek Kod : (Site yardımı ile mavi temada bir buton oluşturdum)
CSS Kodu :

Kod: Tümünü seç

.maviButon {
	-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	box-shadow:inset 0px 1px 0px 0px #cae3fc;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #469df5;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #287ace;
}.maviButon:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
	background-color:#4197ee;
}.maviButon:active {
	position:relative;
	top:1px;
}
ve site içerisinde butonu kullanmak için örnek kod:

Kod: Tümünü seç

<input type="button" value="PHPindir.Net için tıklayın" onclick="location.href='http://www.phpindir.net'" class="maviButon">

Özgür
Deneyimli Üye
Deneyimli Üye
Mesajlar: 351
Kayıt: 16 Şub 2009, 01:16

Re: CSS Buton Yapıcısı - CSS Button Generator

Mesaj gönderen Özgür » 12 Eki 2012, 18:31

İyi bir paylaşım

Cevapla

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir