CSS3 kullanarak kodladığım bu güzel sosyal ağ butonları çok kullanışlı. İsterseniz yazılarınızı paylaşmak içinde kullanabilirsiniz.
CSS
ul{
display: inline;
line-height: 40px;
}
a.dribbble{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F98CB6),color-stop(0,#F75F94));
-webkit-border-radius: 3px;
border-top: 1px solid #fbbad3;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(74,36,49,.9);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.dribbble:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F75F94),color-stop(0,#F98CB6));
}
/*Twitter*/
a.twitter{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #65acc8),color-stop(0,#4586ae));
-webkit-border-radius: 3px;
border-top: 1px solid #a1cdde;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(25,45,55,.9);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.twitter:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4586ae),color-stop(0,#65acc8));
}
/*Facebook*/
a.facebook{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4669ab),color-stop(0,#304886));
-webkit-border-radius: 3px;
border-top: 1px solid #8ea4cd;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(21,31,53,1);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.facebook:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #304886),color-stop(0,#4669ab));
}
/*Forrst*/
a.forrst{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #58853e),color-stop(0,#3c592a));
-webkit-border-radius: 3px;
border-top: 1px solid #99b489;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(22,33,16,1);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.forrst:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #3c592a),color-stop(0,#58853e));
}
/*Designmoo*/
a.designmoo{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #eb5a5f),color-stop(0,#e13c41));
-webkit-border-radius: 3px;
border-top: 1px solid #f39a9e;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(69,22,24,1);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.designmoo:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #e13c41),color-stop(0,#eb5a5f));
}
/*Flickr*/
a.flickr{
position: absolute;
width: 170px;
height: 26px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #ea66ac),color-stop(0,#da3868));
-webkit-border-radius: 3px;
border-top: 1px solid #f3a2cd;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
font-family: "Arial";
font-size: 13px;
text-decoration: none;
font-weight: 700;
padding-bottom: 11px;
padding-left: 10px;
color: rgba(74,4,32,1);
text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.flickr:active{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #da3868),color-stop(0,#ea66ac));
}
/*Using Sprites*/
.icons{
position: absolute;
display: block;
background-image: url(http://u1308.hizliresim.com/1d/8/r8x9p.png);
background-repeat: no-repeat;
height: 26px;
width: 25px;
right: 10px;
bottom: 5px;
}
.icons.dribbble{
background-position: 0 0;
}
.icons.twitter{
background-position: -25px 0;
}
.icons.facebook{
background-position: -50px 0;
}
.icons.forrst{
background-position: -75px 0;
}
.icons.designmoo{
background-position: -100px 0;
}
.icons.flickr{
background-position: -125px 0;
}
a:hover {
-webkit-transition: color 0.8s;
-moz-transition: color 0.8s;
-o-transition: color 0.8s;
transition: color 0.8s;
color:#FFFFFF}
HTML
<ul>
<li><a href="#" class="dribbble">Dribbble<span class="icons dribbble"></span></a></li>
<br/>
<li><a href="#" class="twitter">Twitter<span class="icons twitter"></span></a></li>
<br/>
<li><a href="#" class="facebook">Facebook<span class="icons facebook"></span></a></li>
<br />
<li><a href="#" class="forrst">Forrst<span class="icons forrst"></span></a></li>
<br />
<li><a href="#" class="designmoo">Designmoo<span class="icons designmoo"></span></a></li>
<br />
<li><a href="#" class="flickr">Flickr<span class="icons flickr"></span></a></li>
</ul>
Canlı önizleme
