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>