WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

CSS3 animierter Twitter Button

von | Mai 21, 2014 | Technik | 0 Kommentare

Schlagwörter: CSS3 - Twitter

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)





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert