انجمن کدستانMoisrex

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

html { margin:0; padding:50px 0; background:#231733;}

#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:#7B7484; color:#231733;}

.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;}

<div id="content"> <input type="checkbox" class="checkbox" id="share" checked=""> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li class="entypo-gplus"></li> </ul> </div></div>