Twitter gehört ja in der heutigen Zeit zur Grundausstattung jeder Webseite, und dazu gehört natürlich auch jeder Blog. Nur mir persönlich geht der normale Standardbutton ziemlich auf den Wecker. Aus diesem Grund schau ich oft, dass ich ihn irgendwie animieren oder anpassen kann.
Heute möchte ich euch mal ein schön animierter Twitter Button vorstellen. Das Ganze läuft natürlich überall, da es kein Flash oder sonst was ist, sondern reines CSS3.
So sieht der Button im normal aus.
Fährt man mit der Maus darüber, klappt das Ding auf und man kann dem Twitteraccount folgen.
Mir persönlich gefällt dieser Button wirklich. Man kann den Code natürlich auch selbst verwenden. Hier könnt ihr ihn mal extern anschauen. Aber hier unterhalb sieht man den Code ebenfalls.
<section>
<div class="button">
<a href="https://twitter.com/1Grad" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @1Grad</a>
<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>
<div class="cover">
<div class="innie"></div>
<div class="spine"></div>
<div class="outie"></div>
</div>
<div class="shadow"></div>
</section>
<small>Live version</small>
See the Pen Animierter Twitterbutton by Eric Maechler (@maechler) on CodePen.
Ich wünsche euch viel Spass mit diesem Code. Wie ihr seht, kann man den Code ziemlich einfach anpassen auf seinen Twitter Account.
Übrigens wenn ihr @1Grad followed, bin ich auch nicht unglücklich (wie ihr wisst, arbeite ich ja dort)
0 Kommentare