CSS3 ile Sosyal Ağ Kutucuğu

WordPress ve türevi web sayfaları için bir çok sosyal ağ buttonu mevcut. Bunları daha önce eklentiler kategorisi altında ele almıştık.

Şimdi ise CSS3 ve HTML kodları kullanarak kendi sosyal ağ buttonlarımızı hazırlayacağız. Örnekte Twitter, Facebook ve Google Plus için buttonlar bulunmakta. İstek dahilinde çoğaltılabilmesi gayet basit.

ÖRNEĞİ GÖRÜNTÜLE

Başlayalım

HTML Kodları


<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" onClick="location.href='https://twitter.com/Vatanay'"></li>
 <li class="entypo-facebook" onClick="location.href='http://www.facebook.com/vatanay.ozbeyli‎'"></li>
 <li class="entypo-gplus" onClick="location.href='https://plus.google.com/116021468686674197169'"></li>
 </ul>
 </div>
</div>

CSS Kodları


@import url(https://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;}