CSS3 ile Sosyal butonları

CSS3 ile yapacağımız Sosyal medya butonları sade ve şık bir tasarıma ait.Kodlara geçmeden önce önizleme görelim.

HTML kodu;

CSS kodu;

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}

html {
 margin:0;
 padding:50px 0;
 background:white;
}

#content {
 text-align:center;

 position:absolute;
 left:0;
 right:0;
 margin:auto;
 padding:120px 0 10px 0;

 width:200px;
 height:20px;
}

input[type="checkbox"]{display:none;}

.checkbox:checked + .label{
 background:#9ac71f;
 color:white;
}

.checkbox:checked ~ .social {
 opacity:1;
 -webkit-transform: scale(1) translateY(-90px);
 -moz-transform:scale(1) translateY(-90px);
 -o-transform:scale(1) translateY(-90px);
 transform:scale(1) translateY(-90px);
 -webkit-transition:.5s;
 -moz-transition:.5s;
 -o-transition:.5s;
 transition:.5s;
}

.label {
 font-size:16px;
 cursor:pointer;
 margin:0;
 padding:5px 10px;

 border-radius:10%;
 color:#7B7484;
}

.social {
 transform-origin:50% 0%;

 -webkit-transform: scale(0) translateY(-190px);
 -moz-transform:scale(0) translateY(-190px);
 -o-transform:scale(0) translateY(-190px);
 transform:scale(0) translateY(-190px);

 opacity:0;
}
ul {
 position:relative;
 left:0;
 right:0;
 margin:auto;
 color:#fff;
 height:46px;
 width:180px;
 background:#3B5998;
 padding:0;
 list-style:none;
}

ul li {
 font-size:20px;

 cursor:pointer;
 width:60px;
 margin:0;
 padding:12px 0;
 text-align:center;
 float:left;
 display:block;
 height:22px;}

ul li:hover {color:rgba(0,0,0,.5);}

ul:after {
 content:'';
 display:block;
 position:absolute;
 left:0;
 right:0;
 margin:35px auto;
 height:0;
 width:0;

 border-left: 20px solid transparent;
 border-right: 20px solid transparent;

 border-top: 20px solid #3B5998;
}

li[class*="twitter"] {background:#6CDFEA;padding:12px 0;}
li[class*="gplus"] {background:#E34429;padding:12px 0;}