Profesyonel CSS Butonlar

Fazla css bilgisi gerektirmeyen kullanışlı kolay buton kodları.Renk renk yapabilir isteğinize göre değiştirebilirsiniz.Hepsi zevkinize bağlı.

Buton 1

Görünümü:

Kodu:

<input type="submit" class="styled-button-1" value="Download" />
<style type="text/css"> 
.styled-button-1 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 color:#333;
 background-color:#FA2;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:none;
 font-family:'Helvetica Neue',Arial,sans-serif;
 font-size:16px;
 font-weight:700;
 height:32px;
 padding:4px 16px;
 text-shadow:#FE6 0 1px 0
}
</style>

Buton 2

Görünümü:

Kodu:

<input type="submit" class="styled-button-2" value="Download" /> 
<style type="text/css">
.styled-button-2 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 border-bottom-color:#333;
 border:1px solid #61c4ea;
 background-color:#7cceee;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 color:#333;
 font-family:'Verdana',Arial,sans-serif;
 font-size:14px;
 text-shadow:#b2e2f5 0 1px 0;
 padding:5px
}
</style>

Buton 3

Görünümü:

Kodu:

<input type="submit" class="styled-button-3" value="Download" /> 
<style type="text/css">
.styled-button-3 {
 -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 background-color:#5B74A8;
 border:1px solid #29447E;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
 font-size:12px;
 font-weight:700;
 padding:2px 6px;
 height:28px;
 color:#fff;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px
}
</style>

Buton 4

Görünümü:

Kodu:

<input type="submit" class="styled-button-4" value="Download" /> 
<style type="text/css">
.styled-button-4 {
 -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 background-color:#EEE;
 border-radius:0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 border:1px solid #999;
 color:#666;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
 font-size:11px;
 font-weight:700;
 padding:2px 6px;
 height:28px
}
</style>

Buton 5

Görünümü:

Kodu:

<input type="submit" class="styled-button-5" value="Download" /> 
<style type="text/css">
.styled-button-5 {
 background-color:#ed8223;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:18px;
 line-height:30px;
 border-radius:20px;
 -webkit-border-radius:20px;
 -moz-border-radius:20px;
 border:0;
 text-shadow:#C17C3A 0 -1px 0;
 width:120px;
 height:32px
}
</style>

Buton 6

Görünümü:

Kodu:

<input type="submit" class="styled-button-6" value="Download" /> 
<style type="text/css">
.styled-button-6 {
 background:#f78096;
 background:-moz-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
 background:-webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-o-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-ms-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:linear-gradient(top,#f78096 0%,#f56778 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
 padding:5px 4px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #ae4553
}
</style>

Buton 7

Görünümü:

Kodu:

<input type="submit" class="styled-button-7" value="Download" /> 
<style type="text/css">
.styled-button-7 {
 background:#FF5DB1;
 background:-moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
 background:-webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5DB1',endColorstr='#E94A86',GradientType=0);
 padding:5px 7px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #E8124F
}
</style>

Buton 8

Görünümü:

Kodu:

<input type="submit" class="styled-button-8" value="Download" />
<style type="text/css">
.styled-button-8 {
 background:#25A6E1;
 background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
 background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
 padding:8px 13px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:17px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #1A87B9
}
</style>

Buton 9

Görünümü:

Kodu:

<input type="submit" class="styled-button-9" value="Download" />
<style type="text/css">
.styled-button-9 {
 background:#00A0D1;
 background:-moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
 background:-webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
 padding:8px 20px;
 color:#cfebf3;
 font-family:'Helvetica Neue',sans-serif;
 font-size:13px;
 border-radius:40px;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 border:1px solid #095B7E
}
</style>

Buton 10

Görünümü:

Kodu:

<input type="submit" class="styled-button-10" value="Download" />
<style type="text/css">
.styled-button-10 {
 background:#5CCD00;
 background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
 background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
 padding:10px 15px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:1px solid #459A00
}
</style>

Buton 11

Görünümü:

Kodu:

<input type="submit" class="styled-button-11" value="Download" /> 
<style type="text/css">
.styled-button-11 {
 background:#FEDA71;
 background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
 background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
 padding:8px 18px;
 color:#623F1D;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:48px;
 -moz-border-radius:48px;
 -webkit-border-radius:48px;
 border:1px solid #623F1D
}
</style>

Buton 12

Görünümü:

Kodu:

<input type="submit" class="styled-button-12" value="Download" /> 
<style type="text/css">
.styled-button-12 {
 background:#5B74A8;
 background:-moz-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5B74A8),color-stop(100%,#5B74A8));
 background:-webkit-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background:-o-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background:-ms-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background:linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5B74A8',endColorstr='#5B74A8',GradientType=0);
 padding:2px 6px;
 color:#fff;
 font-family:'Helvetica',sans-serif;
 font-size:11px;
 border-radius:0;
 -moz-border-radius:0;
 -webkit-border-radius:0;
 border:1px solid #1A356E
}
</style>