CSS3 ile Dönen Buton Yapımı

Merhaba, CSS3 ile Fare ile üzerine geldiğimizde dönecek olan bir buton yapıcağız.

Başlayalım

İlk olarak HTML yapımı oluşturuyorum.Butonların olacağı div`in isimleri buton1 ve buton2 olucak.

BUTTON 1

BUTTON 2

Şimdide CSS bölümüne geçelim.Ben iki butondada aynı kodlar olmasın diye böyle yazdım direk a etiketini biçimlendirdim.

*{margin:0;padding:0; box-sizing:border-box;}
a{
font:700 15px "Open Sans",sans-serif;
color:#fff;
text-decoration:none;
display:block;
padding:10px 12px;
}

Buton1 için aşağıdaki CSS kodlarını yazalım

/* Button 1 */
.buton1{
float:left;
width:100px;
height:36px;
margin-right:15px;
}
.buton1 a{
background:#2ecc71;
border-bottom:4px solid #27ae60;
}
.buton1 a:hover{
background:#3498db;
border-bottom:4px solid #2980b9;
transition:all 2s;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
}

Şimdide buton2 kodlarında;

/* Button 2 */
.buton2{
float:left;
width:100px;
height:36px;
margin-right:15px;
}
.buton2 a{
background:#e74c3c;
border-bottom:4px solid #c0392b;
}
.buton2 a:hover{
background:#e67e22;
border-bottom:4px solid #d35400;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 12s;
transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-webkit-transform:rotateX(360deg);
-o-transform:rotateX(360deg);
}

Demo : http://bit.ly/1td618B
[B]İndir : http://bit.ly/1FfEOb8
Kaynak [/B]: http://dogukanbatal.com/css3-ile-uzerine-gelince-donen-buton-yapimi.html

Teşekkürler, güzel bir anlatım :)