Açılıp Kapanan Twitter Buttonu - İlk Bizde!

Açıklama

Kod Canavarı Yine Hünerli Elleri ile sizlere hizmet vermeye devam ediyor işte onlardan biri açılıp kapanan özel button ilk bizde Kaynak Göstermeden Paylaşmayın. Kodu Almak icin Çift Tıklayın.

Önizleme

Takit Et

Kod

<script type="text/javascript" src="http://kodcanavari.p.ht/script/prefixfree.min.js"></script>  <script type="text/javascript" src="http://kodcanavari.p.ht/script/ajax.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="kodcanavari">
<div class="aaa">
<div class="aba"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1372833608.html#_=1373774026114&id=twitter-widget-0&lang=tr&screen_name=twitter&show_count=false&show_screen_name=true&size=l" class="twitter-follow-button twitter-follow-button" style="width: 150px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe></div>
<div class="abc">
<div class="dbc"></div>
<div class="dec"></div>
<div class="def"></div>
</div>
<div class="dea"></div>
</div>
</div>
<style type="text/css">
.kodcanavari {
padding: 1rem;
box-sizing: border-box; 
}
.aaa, .aba, .abc, .dbc, .dec, .def, .dea {
-webkit-transition: 0.6s;
}
.aaa, button { -webkit-transition-timing-function: ease; }
.aaa {
display: inline-block;
position: relative;
-webkit-align-self: center;
padding: .375rem 1rem 0;
height: 2.5rem;
background: #A9ADB6;
border-radius: .25rem;
-webkit-perspective: 300;
box-dea: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}
.aba { opacity: 0; }
.abc {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
-webkit-transform-origin: center bottom;
-webkit-transform-style: preserve-3d;
/* Twitter Logosu küçükse veya büyükse Değiştirini Örnek font: 1.35em/2 "icon"; */
font: 1.95em/2 "icon";
color: white;
text-align: center;
pointer-events: none;
z-index: 100;
}
.dbc, .def, .dec, .dea { position: absolute; width: 100%; }
.dbc, .def {
height: 100%;
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
border-radius: .25rem;
}
.dbc:after, .def:after { content:"t"; }
.dbc {
background-color: #67E2FE;
text-dea: 0 -2px 4px rgba(0,0,0,.2);
}
.dec {
top: .25rem;
background: #20C7F3;
height: .25rem;
-webkit-transform: rotateX(90deg);
-webkit-transform-origin: center top;
}
.dea {
top: 100%;
left: 0;
height: 3.5rem;
-webkit-transform-origin: center top;
-webkit-transform: rotateX(90deg);
opacity: 0;
z-index: 0;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
background-image: -webkit-linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
border-radius: .4rem;
}
.def {
background-color: #2EC8FA;
-webkit-transform: translateZ(.25rem);
text-dea: 0 2px 4px rgba(0,0,0,.2);
}
.aaa:hover { background: #EBEFF2; }
.aaa:hover .aba { opacity: 1; }
.aaa:hover .abc, .aaa:hover .dbc, .aaa:hover .dec, .aaa:hover .def, .aaa:hover .dec { -webkit-transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }
.aaa:hover .abc { -webkit-transform: rotateX(-120deg);}
.aaa:hover .dbc { background-color: #3ADAFC; }
.aaa:hover .dec { background-color: #52B1E0; }
.aaa:hover .def { background-color: #2174A0; color: rgba(255,255,255,0); }
.aaa:hover .dea { 
opacity: 1;
-webkit-transform: rotateX(45deg) scale(.95);
}
@font-face { font-family:icon; src: url('http://bennettfeely.com/fonts/icons.woff'); }
</style>

''Açılıp Kapanan Twitter Buttonu - İlk Bizde!'' Bu yazı; 11 Temmuz 2013 Perşembe tarihinde HTML Kodları kategorisine eklenmiş olup Admin tarafından yayınlanmıştır.