Rengarenk buton tasarımları

Web siteniz  için kullanabileceğiniz birbirinden güzel buton örnekleri.  Lucas Bonomi tarafından Css3  kullanılarak hazırlanmış olan bu buton örneklerinin şekilleri aynı olsa  bile sizler  için farklı farklı  renklerde  oluşturulmuş. Ayrıca butonlarda parlaklık farkıda  olduğu için iki farklı grup olarak düşünebiliriz. Bir  grup  normal iken diğer  grup biraz daha parlak olarak  oluşturulmuş pek belli  olmasa  bile birbirlerinden farkları var biraz. Normal butonların yanı sıra “We love icon fonts” kullanılarak ta oluşturulmuş örnekler var. “We love icon fonts”  ikonları hakkında  daha fazla ikon örneğine buradan bakabilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css :

@import url(https://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 1em;
}
body {
    font-size: 1em;
    letter-spacing: .1em;
    line-height: 1;
  background:#ffffff;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 20px;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/* Style starts here */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue",hevetica ,sans-serif;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(0,0,0,.4),0 2px 2px rgba(0,0,0,.24);
}

article{
  display:block;
width:80%;
margin:25vh auto;
}

.btn {
    text-decoration: none;
    appearance: none;
    border: 0;
    padding: .8em .8em 1em;
    display: block;
    float: left;
    width: auto;
    margin: .2em .4em;
    border: 1px solid #fff;
    font-size: .8em;
    line-height: 1;
    color: #2c3e50;
    text-shadow: 0 0 0;
    outline: 0;
    /*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: 45px;
    font-weight: bold;
    font-size: 1.2em;
    line-height: .6;
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#2186d4),to(#175dbd));
    background: -webkit-linear-gradient(#2186d4,#175dbd);
    background: -moz-linear-gradient(#2186d4,#175dbd);
    background: -o-linear-gradient(#2186d4,#175dbd);
    background: linear-gradient(#2186d4,#175dbd);
    color: #fff;
    border: 1px solid #244868;
    text-shadow: 0 -1px 4px rgba(0,0,0,.4);
    /*box-shadow*/
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 1px rgba(255,255,255,.1);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 1px rgba(255,255,255,.1);
    box-shadow: 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 1px rgba(255,255,255,.1);
  position:relative
}
.btn:hover{
top:2px;  
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0px rgba(255,255,255,.2);
}
.btn.red {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#e74c3c),to(#c0392b));
    background: -webkit-linear-gradient(#e74c3c,#c0392b);
    background: -moz-linear-gradient(#e74c3c,#c0392b);
    background: -o-linear-gradient(#e74c3c,#c0392b);
    background: linear-gradient(#e74c3c,#c0392b);
    border: 1px solid brown;
}
.btn.green {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#2ecc71),to(#27ae60));
    background: -webkit-linear-gradient(#2ecc71,#27ae60);
    background: -moz-linear-gradient(#2ecc71,#27ae60);
    background: -o-linear-gradient(#2ecc71,#27ae60);
    background: linear-gradient(#2ecc71,#27ae60);
    border: 1px solid #2e8a25;
}
.btn.yellow {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#f1c40f),to(#f39c12));
    background: -webkit-linear-gradient(#f1c40f,#f39c12);
    background: -moz-linear-gradient(#f1c40f,#f39c12);
    background: -o-linear-gradient(#f1c40f,#f39c12);
    background: linear-gradient(#f1c40f,#f39c12);
    border: 1px solid #e67e22;
}
.btn.purple {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#9b59b6),to(#8e44ad));
    background: -webkit-linear-gradient(#9b59b6,#8e44ad);
    background: -moz-linear-gradient(#9b59b6,#8e44ad);
    background: -o-linear-gradient(#9b59b6,#8e44ad);
    background: linear-gradient(#9b59b6,#8e44ad);
    border: 1px solid #34495e;
}
.btn.dark {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#34495e),to(#2c3e50));
    background: -webkit-linear-gradient(#34495e,#2c3e50);
    background: -moz-linear-gradient(#34495e,#2c3e50);
    background: -o-linear-gradient(#34495e,#2c3e50);
    background: linear-gradient(#34495e,#2c3e50);
    border: 1px solid #333;
}
.btn.light {
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#ecf0f1),to(#bdc3c7));
    background: -webkit-linear-gradient(#ecf0f1,#bdc3c7);
    background: -moz-linear-gradient(#ecf0f1,#bdc3c7);
    background: -o-linear-gradient(#ecf0f1,#bdc3c7);
    background: linear-gradient(#ecf0f1,#bdc3c7);
    border: 1px solid #666;
}

/* Light version*/
.light .btn{
  font-weight:300
}

• Body etiketleri arasına eklemeniz gereken bölüm.

 Html : 

<article>
  <a href="#" class="btn">Hello</a>
  <a href="#" class="btn red">World</a>
  <a href="#" class="btn green">I am a set</a>
  <a href="#" class="btn yellow">Of sweet</a>
  <a href="#" class="btn purple">Looking</a>
  <a href="#" class="btn dark">Buttons</a>
  <a href="#" class="btn light">Yay!</a>
  <!-- with icons | weloveiconfonts.com -->
  <span class="clearfix"></span>
  <a href="#" class="btn"><span class="entypo-paper-plane"></span></a>
  <a href="#" class="btn red"><span class="entypo-home"></span></a>
  <a href="#" class="btn green"><span class="entypo-monitor"></span></a>
  <a href="#" class="btn yellow"><span class="entypo-vcard"></span></a>
  <a href="#" class="btn purple"><span class="entypo-camera"></span></a>
  <a href="#" class="btn dark"><span class="entypo-upload-cloud"></span></a>
  <a href="#" class="btn light"><span class="entypo-search"></span></a>
</article>

<article class="light">
  <a href="#" class="btn">Hello</a>
  <a href="#" class="btn red">World</a>
  <a href="#" class="btn green">I'm a set</a>
  <a href="#" class="btn yellow">Of sweet</a>
  <a href="#" class="btn purple">Looking</a>
  <a href="#" class="btn dark">Buttons</a>
  <a href="#" class="btn light">Yay!</a>
  <!-- with icons | weloveiconfonts.com -->
  <span class="clearfix"></span>
  <a href="#" class="btn"><span class="entypo-paper-plane"></span></a>
  <a href="#" class="btn red"><span class="entypo-home"></span></a>
  <a href="#" class="btn green"><span class="entypo-monitor"></span></a>
  <a href="#" class="btn yellow"><span class="entypo-vcard"></span></a>
  <a href="#" class="btn purple"><span class="entypo-camera"></span></a>
  <a href="#" class="btn dark"><span class="entypo-upload-cloud"></span></a>
  <a href="#" class="btn light"><span class="entypo-search"></span></a>
</article>