about

@import url(http://weloveiconfonts.com/api/?family=entypo); /* 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; } li[class*="twitter"] {background:#6CDFEA;padding:12px 0;} li[class*="gplus"] {background:#E34429;padding:12px 0;}

ads

Search This Blog

Popular Posts

about

0 comments:

Labels

Followers