[CSS] Social Media Buttons and hover effects ✤✤

Social Media Buttons sind ein ziemlich grosses Ding momentan. Heute möcht ich euch zeigen, wie ihr welche mit purem CSS und ohne ein einziges Bild gestalten könnt.
Das ganze beinhaltet natürlich hover-Effekte die sich auch auf jede andere Art von Text anwenden lassen.

Social Media Buttons are a pretty big thing right now. Today I want to show you how you can create some with CSS only and without the use of a single image.
Ther's some hover-style, which you can use on practically anything else as well.

Font-Awesome

Das Geheimnis heisst Font-Awesome. Diese Icon-Schrift ist fantastisch und beinhaltet alle wichtigen Icons die ihr braucht. Ich habe Font Awesome bereits bei der Untertitle-Bar gezeigt. Jetzt brauchen wir es noch einmal. :)

Um das ganze in eueren Blog zu implementieren platziert ihr folgenden Code in eurem Head-Teil des Blogs. (HTML bearbeiten, schliessendes Head-Tag suchen und oberhalb davon einfügen)

The secret behind it is called font awesome. This fantastic icon font contains all major SMB. Everything you need to do is add this link into the head-part of your HTML

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

Um ein Icon zu implementieren, müsst ihr den Namen als Klasse eines i-Tags definieren.
Welche Icons es gibt findet ihr hier

Für unsere Social Media Icons wären das also:

To add it, just add the concerning class into some i-tags. A list of all the icons can be found here.
For our SMI it would be:

<i class="icon-facebook"></i>
<i class="icon-google-plus"></i>
<i class="icon-twitter"></i>
<i class="icon-instagram"></i>
<i class="icon-pinterest"></i>
<i class="icon-tumblr"></i>

Da sie in einem i-Tag verpackt werden, lassen sie sich mit jeder CSS stylen, die man auf einen Text anwenden kann. Die Möglichkeiten sind also nahezu endlos.

Because they are i-tags, every CSS working for text can be added.

Stacking Icons

Font Awesome verfügt auch über sign-icons dieser Icons. So gibt es (bis auf Instagram) auch immer noch eine sign-Version. Doch wenn man zum Beispiel ein Herz als Hintergrund haben möchte, kann man das auch machen. Es gibt die Möglichkeit Icons zu stapeln. Das machen wir uns jetzt zu Nutze, auch weil wir dann Hintergrund und Logo unterschiedlich stylen können.

You can stack them as well, which is what we're gonna use today. You can place them on practically everything.

<i class="icon-facebook-sign></i>
<i class="icon-google-plus-sign"></i>
<i class="icon-twitter-sign"></i> 
<i class="icon-instagram"></i>
<i class="icon-pinterest-sign"></i> 
<i class="icon-tumblr-sign"></i>

Man definiert eines als stack-base und das andere kommt dann oben drüber.

<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-instagram"></i>
</span>

Damit ist die Basis für unser Social Media Buttons geschaffen.

That's our base.

Colors

Das nächste was social media buttons ausmachen sind die Farben. Jeder hat seinen eigenen Farbton. Ich bin auf der Suche auf eine Seite gestossen, die uns jeden Ton angegeben hat.

You can find the colors of each social media on this page.

Link

Damit ist die nächste Komponente abgeschlossen und wir können zum Style kommen. Ich hab verschiedene, die ich euch einzeln vorstellen werde.

Markup

Das Markup und die CSS sind jeweils so geschrieben, dass ihr jedes beliebige Icon als Stackbase verwenden könnt.
So könnt ihr das Certificate, Kreis, Rechteck, Herz...
Ich hab zum Teil jeweils noch eine Version ohne Base gemacht, das Markup dafür wird mit der Klasse Plain gestylt.

The markup and CSS are written that you can stack them on top of everythign you want. For some examples I did use them plainly, there's a slightly different markup then.

<!-- STACKED-->
<a href="#"><span class="facebook icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-facebook"></i>
</span></a>

<!-- PLAIN -->
<a href="#"><span class="instagram plain">
  <i class="icon-instagram"></i>
</span></a>

Den Code könnt ihr euch dann auch bei den Beispielen ansehen.

Just have a look at the code in the examples.

Line it Out

Bei diesem Style kehren wir die Farben um und fügen gleichzeitig eine äusseren Linie ein, die unseren Hintergrund umrahmt.

Switching colors and adding a text border.

Overgrown

Hier wächst das Logo, während das Logo kleiner wird. Ausserdem haben wir einen Rahmen um das Log und eine Farbveränderung

Growing Logo shrinking background.

Blow it up

Bei diesem Style wachsen Hintergrund und Logo. Ein Spiel mit Deckkraft ist auch dabei.

Growing logo and a play with opacity

Push the Button

Dieser Style enthält einen 3D-Effekt.

3D effect

Add a Twist

Hier haben wir einen rotierenden Hintergrund. Nicht gerade für den Kreis gedacht, aber mit anderen Elementen sieht es toll aus.

Rotating Background

Blurred Lines

Beim letzten Beispiel wird das Logo verwaschen und unscharf.

Blur, blur blur.


Ich hoffe dieser Post hat euch ein paar Möglichkeiten gezeigt, was man mit SMB mchen kann. :)

Eingefügt in den Blog wird das ganze am einfachsten über ein HTML-Gadget. CSS in Style-Tags packen, Links einfügen und ihr könnt sie benutzen ^^

Hopw I could show you some new stuff to discover :)
To add to your blog just put the code into a html-wiget, wrap the CSS in some style-tags, add your links in and you're good to go.

EDIT

Da ich gefragt wurde, hier noch ein Beispiel in Code-Form, was ins HTML-Gadget kommt und wie. Dafür verwende ich den Code des letzten Beispiels.

Ich habe mich für die "plain"-Ansicht entschieden.
Dafür kopiere ich das Markup welches unterhalb von Plain steht und mit CIRCLE endet.
Die # werden durch die jeweilige URL ersetzt, zu der die Buttons führen sollen.

<!-- PLAIN -->
<a href="#"><span class="instagram plain">
  <i class="icon-instagram"></i>
</span></a>

<a href="#"><span class="tumblr plain">
  <i class="icon-tumblr"></i>
</span></a>

<a href="#"><span class="facebook plain">
  <i class="icon-facebook"></i>
</span></a>

<a href="#"><span class="google-plus plain">
  <i class="icon-google-plus"></i>
</span></a>

<a href="#"><span class="pinterest plain">
  <i class="icon-pinterest"></i>
</span></a>

<a href="#"><span class="twitter plain">
  <i class="icon-twitter"></i>
</span></a>

Als nächstes die CSS, und zwar ab start style. Das ganze kommt unterhalb des vorherigen Codes, zwischen zwei Style-Tags.

<style>
/* START STYLE */
.plain:hover .icon-tumblr:hover,
.tumblr:hover i:not(.icon-tumblr), .icon-tumblr:hover{
text-shadow: 0 0 5px #32506d;
color: transparent;
}

.plain:hover .icon-pinterest:hover,
.pinterest:hover i:not(.icon-pinterest), .icon-pinterest:hover{
text-shadow: 0 0 5px #cb2027;
color: transparent;
}

.plain:hover .icon-facebook:hover,
.facebook:hover i:not(.icon-facebook), .icon-facebook:hover{
text-shadow: 0 0 5px #3b5998;
color: transparent;
}

.plain:hover .icon-twitter:hover,
.twitter:hover i:not(.icon-twitter), .icon-twitter:hover{
text-shadow: 0 0 5px #00aced;
color: transparent;
}

.plain:hover .icon-instagram:hover,
.instagram:hover i:not(.icon-instagram), .icon-instagram:hover{
text-shadow: 0 0 5px #517fa4;
color: transparent;
}

.plain:hover .icon-google-plus:hover,
.google-plus:hover i:not(.icon-google-plus), .icon-google-plus:hover{
color: transparent;
text-shadow: 0 0 5px #dd4b39;
}

.tumblr .icon-tumblr:hover,
.pinterest .icon-pinterest:hover,
.facebook .icon-facebook:hover,
.google-plus .icon-google-plus:hover, 
.instagram .icon-instagram:hover,
.twitter .icon-twitter:hover{
    text-shadow: 0 0 5px #fff;
}

.tumblr i:not(.icon-tumblr), .plain .icon-tumblr {color: #32506d}
.pinterest i:not(.icon-pinterest), .plain .icon-pinterest{color: #cb2027}
.facebook i:not(.icon-facebook), .plain .icon-facebook{color: #3b5998}
.twitter i:not(.icon-twitter), .plain .icon-twitter{color: #00aced}
.instagram i:not(.icon-instagram), .plain .icon-instagram{color: #517fa4}
.google-plus i:not(.icon-google-plus), .plain .icon-google-plus{color: #dd4b39}
</style>

Dann speichern und es sollte alles klappen. :)