[CSS] Turuncu Buton || MtnByk

[MtnByk]

..:::HTML KODU:::..
​

<button class="turuncu">MtnByk CSS Butonlar</button>

..:::CSS KODU:::..​

button.turuncu {    border: 1px solid #c08c32;
    background: #fed76f;
    background: -moz-linear-gradient(top,  #fed76f 0%, #eaae45 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed76f), color-stop(100%,#eaae45));
    background: -webkit-linear-gradient(top,  #fed76f 0%,#eaae45 100%);
    background: -o-linear-gradient(top,  #fed76f 0%,#eaae45 100%);
    background: -ms-linear-gradient(top,  #fed76f 0%,#eaae45 100%);
    background: linear-gradient(top,  #fed76f 0%,#eaae45 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed76f', endColorstr='#eaae45',GradientType=0 );
    padding: 5px 10px;
    color: #8f6c2c;
    font-weight: bold;
    text-shadow: 1px 1px 0 #ffcf75;
}


button.turuncu:hover {
    cursor: pointer;
    background: -moz-linear-gradient(top,  #fed76f 0%, #f9bc52 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed76f), color-stop(100%,#f9bc52));
    background: -webkit-linear-gradient(top,  #fed76f 0%,#f9bc52 100%);
    background: -o-linear-gradient(top,  #fed76f 0%,#f9bc52 100%);
    background: -ms-linear-gradient(top,  #fed76f 0%,#f9bc52 100%);
    background: linear-gradient(top,  #fed76f 0%,#f9bc52 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed76f', endColorstr='#f9bc52',GradientType=0 );
}




button.turuncu:active {
    box-shadow: 0 2px 1px #aaa,-2px 2px 5px #e0a641 inset;
    background: #f3ce6a;
    background: -moz-linear-gradient(top,  #f3ce6a 0%, #eaae45 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3ce6a), color-stop(100%,#eaae45));
    background: -webkit-linear-gradient(top,  #f3ce6a 0%,#eaae45 100%);
    background: -o-linear-gradient(top,  #f3ce6a 0%,#eaae45 100%);
    background: -ms-linear-gradient(top,  #f3ce6a 0%,#eaae45 100%);
    background: linear-gradient(top,  #f3ce6a 0%,#eaae45 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3ce6a', endColorstr='#eaae45',GradientType=0 );

}

Görüntü:

​

Not; CSS kodunda bulunan "Turuncu" ile adlandırılmış kodu değişirseniz HTML kodundaki "Turuncu" yazan yeride ona göre düzenlemeniz gerekir.

 

[MtnByk]

Güncel+