Daha önce paylaştığımız Profesyonel CSS Butonlar yazımızda sizlere css butonları vermiştik.Şimdi bir tık daha güzel olan butonları sizlere veriyoruz.Daha modern ve daha şık tasarımlar için...
Profesyonel Buton CSS
Buton 1
<a href="#" data-text="Button 1" class="button button-1" >Button 1</a>
<style type="text/css">
.button-1 {
font-weight: 400;
outline: 0;
padding: 8px 15px;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
background-color: #09c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
background-image: -webkit-linear-gradient(top, #2faddb, #09c);
background-image: -moz-linear-gradient(top, #2faddb, #09c);
background-image: -ms-linear-gradient(top, #2faddb, #09c);
background-image: -o-linear-gradient(top, #2faddb, #09c);
background-image: linear-gradient(top, #2faddb, #09c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
border: 1px solid #3990ab;
color: #fff;
}
.button-1:hover {
background-color: #61C6ED;
background-image: -webkit-gradient(linear, left top, left bottom, from(#61C6ED), to(#61C6ED));
background-image: -webkit-linear-gradient(top, #61C6ED, #61C6ED);
background-image: -moz-linear-gradient(top, #61C6ED, #61C6ED);
background-image: -ms-linear-gradient(top, #61C6ED, #61C6ED);
background-image: -o-linear-gradient(top, #61C6ED, #61C6ED);
background-image: linear-gradient(top, #61C6ED, #61C6ED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#61C6ED', EndColorStr='##61C6ED',GradientType=0);
border: 1px solid #6ABAD5;
color: #fff;
}
.button-1:active {
background-color: #09c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0F6B8E), to(#0F6B8E));
background-image: -webkit-linear-gradient(top, #0F6B8E, #0F6B8E);
background-image: -moz-linear-gradient(top, #0F6B8E, #0F6B8E);
background-image: -ms-linear-gradient(top, #0F6B8E, #0F6B8E);
background-image: -o-linear-gradient(top, #0F6B8E, #0F6B8E);
background-image: linear-gradient(top, #0F6B8E, #0F6B8E);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0F6B8E', EndColorStr='#0F6B8E',GradientType=0);
border: 1px solid #13586F;
color: #fff;
}
</style>
Buton 2
<a href="#" data-text="Button 2" class="button button-2" >Button 1</a>
<style type="text/css">
.button-2 {
color: #555;
border: 1px solid #ccc;
background: white;
margin-right: 10px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
box-shadow: 1px 1px 5px #EEE;
-webkit-box-shadow: 1px 1px 5px #EEE;
-moz-box-shadow: 1px 1px 5px #EEE;
background: white;
padding: 8px 15px;
cursor: pointer;
}
.button-2:hover {
background-color: #efefef;
color: #555;
}
.button-2:active {
background-color: #dddddd;
}
</style>
Buton 3
<a href="#" data-text="Button 3" class="button button-3" >Button 3</a>
<style type="text/css">
.button-3 {
background-color: #400090;
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-font-smoothing: antialiased;
border: 1px solid #6c4988;
padding: 8px 15px;
cursor: pointer;
}
.button-3:hover {
background-color: #7432C8;
color: #fff;
}
.button-3:active {
background-color: #29005E;
}
</style>
Buton 4
<a href="#" data-text="Button 4" class="button button-4" >Button 4</a>
<style type="text/css">
.button-4 {
cursor: pointer;
background: #1ca5d5;
padding: 9px 16px;
color: #fff;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-border-radius: 1px;
text-decoration: none;
border:none;
}
.button-4:hover {
background: #52C4EA;
color: #fff;
}
.button-4:active {
background: #096A8A;
}
</style>
Buton 5
<a href="#" data-text="Button 5" class="button button-5" >Button 5</a>
<style type="text/css">
.button-5 {
cursor: pointer;
background-color: #fff;
padding: 8px 15px;
color: #bd0020;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 2px 1px rgb(249,221,221);
-moz-box-shadow: 0px 3px 1px rgb(249,221,221);
box-shadow: 0px 2px 1px rgb(249,221,221);
border: none;
}
.button-5:hover {
background-color: rgba(249,221,221,0.3);
color: #bd0020;
}
.button-5:active {
background-color: rgba(249,221,221,0.5);
}
</style>
Buton 6
<a href="#" data-text="Button 6" class="button button-6" >Button 6</a>
<style type="text/css">
.button-6 {
cursor: pointer;
padding: 8px 15px;
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);
}
.button-6:hover {
background-color: #3079ed;
background-image: none;
color: #fff;
}
</style>
Buton 7
<a href="#" data-text="Button 7" class="button button-7" >Button 7</a>
<style type="text/css">
.button-7 {
cursor: pointer;
border: 2px solid #d14836;
padding: 7px 14px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #d14836;
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
background-image: linear-gradient(top,#dd4b39,#d14836);
}
.button-7:hover {
background-color: #d14836;
color: #fff;
background-image: none;
}
</style>
Buton 8
<a href="#" data-text="Button 8" class="button button-8" >Button 8</a>
<style type="text/css">
.button-8 {
cursor: pointer;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
box-shadow: 0 1px 0 rgba(0,0,0,.05);
background-color: #53a93f;
border: 1px solid #53a93f;
color: #fff;
text-shadow: none;
padding: 8px 15px;
}
.button-8:hover {
border-color: #4c8534;
color: #fff;
}
.button-8:active {
background-color: #4c8534;
}
</style>
Buton 9
<a href="#" data-text="Button 9" class="button button-9" >Button 9</a>
<style type="text/css">
.button-9 {
cursor: pointer;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
box-shadow: 0 1px 0 rgba(0,0,0,.05);
background-color: #fff;
color: #404040;
border: 1px solid #d9d9d9;
border: 1px solid rgba(0,0,0,.15);
padding: 8px 15px;
}
.button-9:hover {
border: 1px solid #b8b8b8;
color: #404040;
}
.button-9:active {
background-color: #efefef;
}
</style>
Buton 10
<a href="#" data-text="Button 10" class="button button-10" >Button 10</a>
<style type="text/css">
.button-10 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #333333;
background-color: #ffffff;
}
.button-10:hover {
background-color: #efefef;
color: #ffffff;
}
</style>
Buton 11
<a href="#" data-text="Button 11" class="button button-11" >Button 11</a>
<style type="text/css">
.button-11 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #d43f3a;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #d9534f;
}
.button-11:hover {
background-color: #d43f3a;
color: #ffffff;
}
</style>
Buton 12
<a href="#" data-text="Button 12" class="button button-12" >Button 12</a>
<style type="text/css">
.button-12 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #4cae4c;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #5cb85c;
}
.button-12:hover {
background-color: #4cae4c;
color: #ffffff;
}
</style>
Buton 13
<a href="#" data-text="Button 13" class="button button-13" >Button 13</a>
<style type="text/css">
.button-13 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #18bc9c;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #18bc9c;
}
.button-13:hover {
background-color: #318D7B;
border-color: #087A64;
color: #ffffff;
}
</style>
Buton 14
<a href="#" data-text="Button 14" class="button button-14" >Button 14</a>
<style type="text/css">
.button-14 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #2c3e50;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #2c3e50;
}
.button-14:hover {
background-color: #28323C;
border-color: #0E2134;
color: #ffffff;
}
</style>
Buton 15
<a href="#" data-text="Button 15" class="button button-15" >Button 15</a>
<style type="text/css">
.button-15 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #73a839;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #73a839;
padding: 8px 15px;
cursor: pointer;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88c149), color-stop(60%, #73a839), to(#699934));
background-image: -webkit-linear-gradient(#88c149, #73a839 60%, #699934);
background-image: -moz-linear-gradient(top, #88c149, #73a839 60%, #699934);
background-image: linear-gradient(#88c149, #73a839 60%, #699934);
background-repeat: no-repeat;
border-bottom: 1px solid #59822c;
}
.button-15:hover {
background-image: none;
color: #ffffff;
}
.button-15:active {
background-image: none;
background-color: #59822c;
}
</style>
Buton 16
<a href="#" data-text="Button 16" class="button button-16" >Button 16</a>
<style type="text/css">
.button-16 {
padding: 8px 15px;
cursor: pointer;
border: 1px solid #033c73;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: #ffffff;
background-color: #033c73;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04519b), color-stop(60%, #033c73), to(#02325f));
background-image: -webkit-linear-gradient(#04519b, #033c73 60%, #02325f);
background-image: -moz-linear-gradient(top, #04519b, #033c73 60%, #02325f);
background-image: linear-gradient(#04519b, #033c73 60%, #02325f);
background-repeat: no-repeat;
border-bottom: 1px solid #022241;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff04519b', endColorstr='#ff02325f', GradientType=0);
}
.button-16:hover {
background-image: none;
color: #ffffff;
}
</style>
Buton 17
<a href="#" data-text="Button 17" class="button button-17" >Button 17</a>
<style type="text/css">
.button-17 {
padding: 8px 15px;
cursor: pointer;
color: #ffffff;
background-color: #c71c22;
border: 1px solid #c71c22;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e12b31), color-stop(60%, #c71c22), to(#b5191f));
background-image: -webkit-linear-gradient(#e12b31, #c71c22 60%, #b5191f);
background-image: -moz-linear-gradient(top, #e12b31, #c71c22 60%, #b5191f);
background-image: linear-gradient(#e12b31, #c71c22 60%, #b5191f);
background-repeat: no-repeat;
border-bottom: 1px solid #9a161a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe12b31', endColorstr='#ffb5191f', GradientType=0);
}
.button-17:hover {
background-image: none;
color: #ffffff;
}
</style>
Buton 18
<a href="#" data-text="Button 18" class="button button-18" >Button 18</a>
<style type="text/css">
.button-18 {
padding: 8px 15px;
cursor: pointer;
color: #ffffff;
background-color: #c71c22;
border: 1px solid #c71c22;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.button-18:hover {
color: #ffffff;
}
</style>
Buton 19
<a href="#" data-text="Button 19" class="button button-19" >Button 19</a>
<style type="text/css">
.button-19 {
padding: 8px 15px;
cursor: pointer;
color: #333;
background-color: #f6e312;
border: 1px solid #e9ac1a;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF6E312', endColorstr='#FFF9C80D');
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6e312), color-stop(100%, #f9c80d));
background-image: -webkit-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
background-image: -moz-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
background-image: -o-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
background-image: linear-gradient(top, #f6e312 0%,#f9c80d 100%);
}
.button-19:hover {
color: #333;
}
</style>
