CSS Buton Örnekleri

Hazır CSS Buton Kodları

Butonların web sayfasının önemli öğesi olduğunu daha önceki yazılarda belirtmiştim. Giriş formlarında, ziyaretçi yorumarında, facebook, tiwtter gibi uygulama iconlarında butonları sıklıkla görmekteyiz. Bu yazıda CSS3 tekniği kullanarak çeşitli şekillerde ve renklerde hazır butonlar sundum. Kodları kopyalayıp sayfalarınızda kolaylıkla kullanabilirsiniz. Bunlar için <button> etiketini kulladım ama <a> ve <input> etiketlerini de kullanabilirsiniz.

Bu yazı da ilgilinizi çekebilir.

Yeşil CSS buton yapımı

CSS


.btn1 {
background-color:#44c767;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:20px 63px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.btn1:hover {
background-color:#5cbf2a;
}
.btn1:active {
position:relative;
top:1px;
}

.btn1 {

background-color:#44c767;

border:1px solid #18ab29;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:19px;

padding:20px 63px;

text-decoration:none;

text-shadow:0px 1px 0px #2f6627;

}

.btn1:hover {

background-color:#5cbf2a;

}

.btn1:active {

position:relative;

top:1px;

}

HTML


<button class="btn1">Ağaçlar</button>

<button class="btn1">Ağaçlar</button>

Mavi CSS buton

CSS


.btn2 {
-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
background-color:#7892c2;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:12px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.btn2:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
background-color:#476e9e;
}
.bnt2:active {
position:relative;
top:1px;
}

.btn2 {

-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;

-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;

box-shadow: 0px 0px 0px 2px #9fb4f2;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));

background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);

background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);

background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);

background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);

background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);

background-color:#7892c2;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

border:1px solid #4e6096;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:19px;

padding:12px 37px;

text-decoration:none;

text-shadow:0px 1px 0px #283966;

}

.btn2:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));

background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);

background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);

background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);

background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);

background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);

background-color:#476e9e;

}

.bnt2:active {

position:relative;

top:1px;

}

HTML


<button class="btn2">Deniz</button>

<button class="btn2">Deniz</button>

Gölge CSS Buton Yapımı

CSS


.btn3 {
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#599bb3;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:13px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
}
.btn3:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.btn3:active {
position:relative;
top:1px;
}

.btn3 {

-moz-box-shadow: 0px 10px 14px -7px #276873;

-webkit-box-shadow: 0px 10px 14px -7px #276873;

box-shadow: 0px 10px 14px -7px #276873;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));

background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);

background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);

background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);

background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);

background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);

background-color:#599bb3;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:20px;

font-weight:bold;

padding:13px 32px;

text-decoration:none;

text-shadow:0px 1px 0px #3d768a;

}

.btn3:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));

background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);

background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);

background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);

background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);

background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);

background-color:#408c99;

}

.btn3:active {

position:relative;

top:1px;

}

HTML


<button class="btn3">Gölge</button>

<button class="btn3">Gölge</button>

CSS


.btn4 {
-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
box-shadow:inset 0px 39px 0px -24px #e67a73;
background-color:#e4685d;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:6px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #b23e35;
}
.btn4:hover {
background-color:#eb675e;
}
.btn4:active {
position:relative;
top:1px;
}

.btn4 {

-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;

-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;

box-shadow:inset 0px 39px 0px -24px #e67a73;

background-color:#e4685d;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

border:1px solid #ffffff;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:15px;

padding:6px 15px;

text-decoration:none;

text-shadow:0px 1px 0px #b23e35;

}

.btn4:hover {

background-color:#eb675e;

}

.btn4:active {

position:relative;

top:1px;

}

HTML


<button class="btn4">Aşk</button>

CSS


.btn5 {
-moz-box-shadow:inset 0px 0px 15px 3px #23395e;
-webkit-box-shadow:inset 0px 0px 15px 3px #23395e;
box-shadow:inset 0px 0px 15px 3px #23395e;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989));
background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%);
background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%);
background:-o-linear-gradient(top, #2e466e 5%, #415989 100%);
background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%);
background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e466e', endColorstr='#415989',GradientType=0);
background-color:#2e466e;
-moz-border-radius:17px;
-webkit-border-radius:17px;
border-radius:17px;
border:3px solid #1f2f47;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:11px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
.btn5:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));
background:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);
background:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);
background:-o-linear-gradient(top, #415989 5%, #2e466e 100%);
background:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);
background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);
background-color:#415989;
}
.btn5:active {
position:relative;
top:1px;
}

.btn5 {

-moz-box-shadow:inset 0px 0px 15px 3px #23395e;

-webkit-box-shadow:inset 0px 0px 15px 3px #23395e;

box-shadow:inset 0px 0px 15px 3px #23395e;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989));

background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%);

background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%);

background:-o-linear-gradient(top, #2e466e 5%, #415989 100%);

background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%);

background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e466e', endColorstr='#415989',GradientType=0);

background-color:#2e466e;

-moz-border-radius:17px;

-webkit-border-radius:17px;

border-radius:17px;

border:3px solid #1f2f47;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:15px;

padding:11px 32px;

text-decoration:none;

text-shadow:0px 1px 0px #263666;

}

.btn5:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));

background:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);

background:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);

background:-o-linear-gradient(top, #415989 5%, #2e466e 100%);

background:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);

background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);

background-color:#415989;

}

.btn5:active {

position:relative;

top:1px;

}

HTML


<button class="btn5">Mavi</button>

Facebook CSS buton yapımı

CSS


.btn6 {
-moz-box-shadow:inset 0px 1px 5px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 5px 0px #7a8eb9;
box-shadow:inset 0px 1px 5px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
background-color:#637aad;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:2px solid #314179;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:22px;
font-weight:bold;
padding:18px 49px;
text-decoration:none;
}
.btn6:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
background-color:#5972a7;
}
.btn6:active {
position:relative;
top:1px;
}

.btn6 {

-moz-box-shadow:inset 0px 1px 5px 0px #7a8eb9;

-webkit-box-shadow:inset 0px 1px 5px 0px #7a8eb9;

box-shadow:inset 0px 1px 5px 0px #7a8eb9;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));

background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);

background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);

background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);

background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);

background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);

background-color:#637aad;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

border:2px solid #314179;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:22px;

font-weight:bold;

padding:18px 49px;

text-decoration:none;

}

.btn6:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));

background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);

background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);

background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);

background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);

background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);

background-color:#5972a7;

}

.btn6:active {

position:relative;

top:1px;

}

HTML


<button class="btn6">Facebook</button>

<button class="btn6">Facebook</button>

CSS


.btn7 {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #b23e35;
}
.btn7:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
background-color:#ce0100;
}
.btn7:active {
position:relative;
top:1px;
}

.btn7 {

-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;

-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;

box-shadow:inset 0px 1px 0px 0px #f29c93;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));

background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);

background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);

background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);

background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);

background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);

background-color:#fe1a00;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #d83526;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:15px;

font-weight:bold;

padding:6px 24px;

text-decoration:none;

text-shadow:0px 1px 0px #b23e35;

}

.btn7:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));

background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);

background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);

background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);

background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);

background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);

background-color:#ce0100;

}

.btn7:active {

position:relative;

top:1px;

}

HTML


<button class="btn7">Kırmızı</button>

<button class="btn7">Kırmızı</button>

CSS


.btn8 {
-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;
-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
box-shadow:inset 0px 0px 14px -3px #f2fadc;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));
background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);
background-color:#dbe6c4;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #b2b8ad;
display:inline-block;
cursor:pointer;
color:#757d6f;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ced9bf;
}
.btn8:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));
background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);
background-color:#9ba892;
}
.btn8:active {
position:relative;
top:1px;
}

.btn8 {

-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;

-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;

box-shadow:inset 0px 0px 14px -3px #f2fadc;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));

background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);

background-color:#dbe6c4;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #b2b8ad;

display:inline-block;

cursor:pointer;

color:#757d6f;

font-family:Arial;

font-size:15px;

font-weight:bold;

padding:6px 24px;

text-decoration:none;

text-shadow:0px 1px 0px #ced9bf;

}

.btn8:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));

background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);

background-color:#9ba892;

}

.btn8:active {

position:relative;

top:1px;

}

HTML


<button class="btn8">Zeytin</button>

<button class="btn8">Zeytin</button>

CSS


.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}

.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none; 
}

.blue
{
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}

.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

.animate

{

transition: all 0.1s;

-webkit-transition: all 0.1s;

}

.action-button

{

position: relative;

padding: 10px 40px;

margin: 0px 10px 10px 0px;

float: left;

border-radius: 10px;

font-family: 'Pacifico', cursive;

font-size: 25px;

color: #FFF;

text-decoration: none;

}

.blue

{

background-color: #3498DB;

border-bottom: 5px solid #2980B9;

text-shadow: 0px -2px #2980B9;

}

.action-button:active

{

transform: translate(0px,5px);

-webkit-transform: translate(0px,5px);

border-bottom: 1px solid;

}

HTML


<a href="#" class="action-button shadow animate blue">Merhaba</a>

<a href="#" class="action-button shadow animate blue">Merhaba</a>

CSS Buton Örnekleri

Hazır CSS Buton Kodları

Yeşil CSS buton yapımı

Mavi CSS buton

İlgili

1 Yorum

Yorum Yap X

Hazır CSS Buton Kodları

Yeşil CSS buton yapımı

Mavi CSS buton

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X