» » » CSS3 İle Oluşturulmuş Google Tarzı Butonlar

Unknown 5 Şubat 2013 Salı 0 No comments

CSS3 İle Oluşturulmuş Google Tarzı Butonlar
CSS3 İle Oluşturulmuş Google Tarzı Butonlar

Merhaba Arkadaşlar

Şimdi ise başlıkta belirttiğim gibi CSS3 İle Oluşturulmuş Google Tarzı Butonları göstereceğim

Aşağıdaki kodları <head>...</head> kodları arasına yapıştırıyoruz. Eğer bunu blogger siten için yapıyorsan <b:skin>...</b:skin> bu kodlar arasına yapıştırın.
a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.button:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}
a.mavi {
    text-shadow:none;
    color:#fff;
    padding: 10px 30px;
    -webkit-border-radius: 2px 2px;
    border: solid 1px #3079ed;
    background: #4d90fe; /* Old browsers */
    background: -moz-linear-gradient(top,  #4d90fe 0%, #4787ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* IE10+ */
    background: linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4787ed',GradientType=0 ); /* IE6-9 */
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    line-height: 1;
}
 
a.mavi:hover {
text-shadow:none;
color:#fff;
    border: 1px solid #2f5bb7;
    background: #4d90fe; /* Old browsers */
    background: -moz-linear-gradient(top,  #4d90fe 0%, #357ae8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* IE10+ */
    background: linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0 1px 1px #333333;
    -moz-box-shadow: 0 1px 1px #333333;
    box-shadow: 0 1px 1px #333333;
}
 
a.mavi:active {
    border: 1px solid #377cea;
    -webkit-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
    -moz-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
    box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
}
a.turuncu {
    text-shadow:none;
    padding: 10px 30px;
    -webkit-border-radius: 2px 2px;
    border: solid 1px #d64937;
    background: #d64937; /* Old browsers */
    background: -moz-linear-gradient(top,  #d64937 0%, #d14836 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d64937), color-stop(100%,#d14836)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d64937 0%,#d14836 100%); /* IE10+ */
    background: linear-gradient(top,  #d64937 0%,#d14836 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64937', endColorstr='#d14836',GradientType=0 ); /* IE6-9 */
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    line-height: 1;
}
 
a.turuncu:hover {
    text-shadow:none;
color:#fff;
    padding: 10px 30px;
    border: 1px solid #b0281a;
    background: #dd4b39; /* Old browsers */
    background: -moz-linear-gradient(top,  #dd4b39 0%, #c53727 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#c53727)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* IE10+ */
    background: linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4b39', endColorstr='#c53727',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0 1px 1px #333333;
    -moz-box-shadow: 0 1px 1px #333333;
    box-shadow: 0 1px 1px #333333;
}
 
 a.turuncu:active {
    padding: 10px 30px;
color:#fff;
    border: 1px solid #b0281a;
    -webkit-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee; 
}
Aşağıdaki kodlarıda butonları nerde kullanmak istiyorsanız orda kullancaksınız.
<a href="#" class="button">Normal Buton</a><a href="#" class="button left">Sol Buton</a><a href="#" class="button middle">Orta Buton</a><a href="#" class="button middle">Orta Buton</a>

<a href="#" class="button big">Büyük Buton</a><a href="#" class="button left big">Büyük Sol Buton</a><a href="#" class="button middle big">Orta Buton</a><a href="#" class="button middle big">Orta Buton</a>

<a href="#" class="button mavi">Mavi Buton</a><a href="#" class="button turuncu">Turuncu Buton</a>

Örnek Butonlar Aşağıdadır

Normal ButonSol ButonOrta ButonOrta Buton Büyük ButonBüyük Sol ButonOrta ButonOrta Buton Mavi ButonTuruncu Buton

Topics:

About Unknown

Web Sayfamızda, Bilgisayar, İntenret, Güvenlik Sistemleri, Cep Telefonları, Tablet Bilgisayarlar, Navigation Sistemleri, Modem Kurulumları ve Smart TV ayarları ile ilgili tamamı görsel anlatımla hazırlanmış makaleler bulabilirsiniz. Keyifli Zaman Geçirmenizi Dileriz.
«
Next
Sonraki Kayıt
»
Previous
Önceki Kayıt

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )
PHP, ASP Ücretsiz Scriptler © 2013. All Rights Reserved.

Designed by DarkWorkZ