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.

CSS3 animierter Twitter Button

Fährt man mit der Maus darüber, klappt das Ding auf und man kann dem Twitteraccount folgen.

CSS3 animierter Twitter Button

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)

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

Hinterlass einen Kommentar