CSS3 Sosyal Ağ Butonları

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

Devamı »