CSS ile Twitter Butonu

Twitter Buttonu

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


İ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.



  • yusufay

    admin yav mesela küçük bir icona tıklandığında yukarı doğru bir div açılsa öyle birşey yokmu bir baksan—– vede ben öyle birşey buldum asp de döngüye soktuğumda icona tıklıyorum bütün açılacak olan divler aynı anda açılıyor ama ben tıklanan divin açılmasını istiyorum açılıyor o sorun nasıl çözülür