CSS Tutorial: Social Media Buttons

Weil ich seit einer Weile auf immer mehr Social Media Plattformen unterwegs bin, habe ich mir noch einmal bewusster die Frage gestellt, wie sich Social Media Buttons am Besten in eine Webseite einbauen lassen.



Auf der einen Seite sollen sie ja auffallen, auf der anderen Seite dürfen sie aber nicht aufdringlich sein.

Wenn ein Button bei eine:r Seitenbesucher:in Interesse weckt, ist das super. Wenn der Button nervt…ist das eher schlecht…

Ich habe mich bei diesem Menü deshalb für eine minimalistische Version mit einfachem Hover-Effekt in der Farbe der jeweiligen Social Media Plattform entschieden.



In diesem Beitrag zeige ich dir, wie du den Effekt nachbauen kannst.

Wie immer gibt es am Ende des Beitages den Code von Codepen, damit du alles live sehen und selbst ausprobieren kannst.



Ich beginne mit dem HTML – Grundgerüst:

<div>
  <p>Hover the icons.</p>
  <ul>
    <li><a href="#" target="_blank">
        <i class="fab fa-facebook" tabindex="0"></i>
      </a></li>
    <li><a href="#" target="_blank">
        <i class="fab fa-codepen" tabindex="0"></i>
      </a></li>
    <li><a href="#" target="_blank">
        <i class="fab fa-instagram" tabindex="0"></i>
      </a></li>
    <li><a href="#" target="_blank">
        <i class="fab fa-github" tabindex="0"></i>
      </a></li>
    <li><a href="#" target="_blank">
        <i class="fab fa-youtube" tabindex="0"></i>
      </a></li>
    <li><a href="#" target="_blank">
        <i class="fab fa-pinterest" tabindex="0"></i>
      </a></li>
  </ul>
</div>



Wer sich das Markup aufmerksam angesehen hat, dem ist natürlich aufgefallen, dass ich zur Darstellung der Icons Fontawesome benutze. Ich habe zur Einbindung das CDN (content delivery network) von von Fontawesome verwendet:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css



Wenn du Fontawesome in eine Webseite einbinden willst, kopierst du den oben stehenden Link am Besten in den <head> Bereich:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">


Wenn du wissen willst, wie genau du Fontawesome in deine Webseite einbinden kannst, findest du in hier mehr Infos.


Für mein HTML Markup verwende ich vorerst h a href="#" als Platzhalter für einen Link.

tabindex="0" sorgt dafür, dass die Icons mit der Tabulator Taste (Tab) auswählbar sind und somit auch über die Tastatur erreicht werden können. Das ist wichtig, denn nicht alle navigieren Webseiten mit der Maus oder dem Laptop Touchpad.




Bis jetzt sehen die Social Media Buttons in etwa so aus:

Die Social Media Buttons mit Fontawesome in reinem HTML.
Die Social Media Buttons mit Fontawesome in reinem HTML.



Das macht noch nicht viel her. Also geht es jetzt weiter mit…

….den Styles in CSS!



Zuerst kümmere ich mich um die Farbe der Icons und um den Hintergrund:

html {
  background: rgb(41, 41, 41);
  height: 100%;
  width: 100%;
}

Die Farbe ist natürlich optional – ebenso wie die Farbe, die ich für die Icons selbst verwende.



Mit p zentriere ich den Text „Hover the icons.“ und gebe ihm gleichzeitig einen Außenabstand von 2rem oben und unten. i definiert die selben Einstellungen für die Icons.


p, a {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 2rem;
  color: #eee;
}

Ich wende dann Flexbox auf das ul Element, was die Social Media Icons umschließt:

Mit justify-content: center; werden die Icons in der Mitte ihres ul Kontainers zentriert.

flex-wrap: wrap; sort dafür dass Icons in eine neue Zeile rutschen, wenn nicht mehr alle nebeneinander auf die Seite passen.

list-style-type: none; entfernt die für das ul standardmäßig verwendeten Sichpunkte.

margin:1rem verleiht jedem Icon einen Außenabstand von 1rem, und font-size vergrößert die Icons auf eine Schriftgröße von 2rem.



ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem;
  list-style-type: none;
  font-size: 2rem;
}



Als nächstes mache ich mir die .fab Klasse von Fontawesome zu Nutze und gebe den einzelnen Icons ein Padding von 1rem. Außerdem vergrößere ich sie auf 5rem. Das funktioniert bei den Fontawesome Icons über font-size:

.fab {
  font-size: 5rem;
  padding: 1rem;
}



Dann lege ich die Farben der einzelnen Icons fest, die sie annehmen wenn jemand mit der Maus drüber fährt, oder wenn sie angeklickt bzw. auf Touch Screens angetippt werden:

.fa-facebook:hover,
.fa-facebook:focus {
  color: #1877f2;
  transform: scale(1.1);
}

.fa-twitter:hover,
.fa-twitter:focus {
  color: #1da1f2;
  transform: scale(1.1);
}

.fa-youtube:hover,
.fa-youtube:focus {
  color: #df2426;
  transform: scale(1.1);
}

.fa-instagram:hover,
.fa-instagram:focus {
  color: #bd22a2;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-codepen:hover,
.fa-codepen:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-pinterest:hover,
.fa-pinterest:focus {
  color: #b3001b;
  transform: scale(1.1);
}



Damit die Icons beim drüber hovern etwas größer werden, skaliere ich sie um 110%, also 1.1:

.fa-facebook:hover,
.fa-facebook:focus,
.fa-twitter:hover,
.fa-twitter:focus,
.fa-youtube:hover,
.fa-youtube:focus,
.fa-instagram:hover,
.fa-instagram:focus,
.fa-github:hover,
.fa-github:focus
.fa-github:hover,
.fa-github:focus,
.fa-codepen:hover,
.fa-codepen:focus,
.fa-pinterest:hover,
.fa-pinterest:focus {
  transform: scale(1.1);
}



Um den Hover-Effekt weicher aussehen zu lassen, definiere ich eine transition von 4 Sekunden:

/* Transition für die hover Animation */
.fa-facebook,
.fa-codepen,
.fa-youtube,
.fa-instagram,
.fa-github,
.fa-pinterest {
  transition: 0.4s;
}


Fertig!

Eine funktionierende Demo mit Code kannst du dir auf Codepen ansehen.

Am Besten funktioniert Codepen auf der externen Webseite. Diese erreichst du wenn du auf das Edit on Codepen Icon klickst.

See the Pen Social Media Icons by Marty (@Marty-Development) on CodePen.



Wenn du diese Buttons auf einer Webseite verwenden willst und sie mir in den Kommentaren am Ende dieser Seite verlinkst, werde ich mir die Webseite ansehen und dir garantiert antworten.


Danke fürs Lesen!



Diese Webseiten könnten dich interessieren:

Pixel, EM und REM: Was ist der Unterschied?
https://die-netzialisten.de/em-und-rem-was-ist-der-unterschied/

Google Fonts:
https://fonts.google.com


→ Veröffentlicht am 22/05/2020 in CSS, Code & Co

→ Schlagwörter: , , , Einloggen um den Post zu editieren.

0 comments on “CSS Tutorial: Social Media Buttons

    Schreibe einen Kommentar

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