CSS3 ile Sosyal Ağ Kutucuğu

CSS ile Social Button HazırlamaWordPress 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(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;}

Kapanış

İşlemimizbu kadar. Makalenin orjinali Junpei Araya tarafından hazırlanmıştır. Umarım işinize yaramıştır.

Bir sonraki makalemde görüşmek üzere…



  • Ayşegül Özbey

    social.css ve deneme html olarak kodları yapıştırdım ama çalışmadı acaba nasıl yapmam gerek yardımcı olabilirmisiniz
    teşekkürler