CSS ile Twitter Butonu

Merhaba arkadaşlar. Bu makalemde etkileyici bir Twitter sosyal ağ buttonu hazırlayacağız. Hiç vakit kaybetmeden CSS3 ve HTML5 uyumlu buttonumuzu hazırlamaya başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Kendiniz için uygun bir Twitter buttonu ayarlamanız gerekiyor. Bu işlemi buradan yapabilirsiniz.

Button örneği

Takip et: @Vatanay

İlk olarak HTML kodları ile başlayalım :

section id="button">
<p><a href="https://twitter.com/Vatanay" class="twitter-follow-button" data-show-count="false" data-lang="tr" data-size="large" data-show-screen-name="false">Takip et: @Vatanay</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></p>
<div id="twitter">
<div class="logo"><div class="kenar"></div></div>
<div class="top"></div>
<div class="logo kose"></div>
</div>
</section>

Sırada CSS kodlarımız var.

#button {
width:90px;
height: 35px;
margin:0 auto;
-webkit-perspective: 200;
-webkit-perspective-origin: 50% 0;
-moz-perspective: 200;
-moz-perspective-origin: 50% 0;
}

#twitter {
width: 90px;
height: 35px;
text-indent: -9999px;
border: none;
cursor: pointer;
position: relative;
bottom: 100%;
-webkit-transform-origin: bottom;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform .5s ease;
-webkit-transform: translateY(0) rotateX(0);
-moz-transition: -moz-transform .5s ease;
-moz-transform: translate(0);
}

.logo, .top {position: absolute;}

.top {
width: 90px;
height: 5px;
top: 0;
left: 0;
background-color: rgba(84,113,173,1);
-webkit-transform-origin: top;
-webkit-transform: rotateX(-90deg);
-webkit-transition: background-color .5s ease-out;
-moz-transform-origin: top;
-moz-transform: rotateX(-90deg);
-moz-transition: background-color .5s ease-out;
}

.logo {
background:url(twitter-icon-tuts.png) no-repeat;
width: 100%;
height: 100%;
}

.kenar {
display: block;
width: 100%;
height: 100%;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
}

.kose {
-webkit-transform: rotateX(-180deg) translateZ(5px);
}

#button:hover #twitter {
-webkit-transform: translateY(5px) rotateX(-120deg);
-moz-transform: translate(0px, 35px);
}

#button:hover .top{ background-color: rgba(50,74,122,1)}
#button:hover .kenar {background-color: rgba(0,0,0,.5)}

Evet kodlarımız bu kadar.

Bir sonraki makalemde görüşmek üzere, hoşça kalın.