*
Login-Header
blockHeaderEditIcon
Social-media-Header
blockHeaderEditIcon
Worldsoft-Logo
blockHeaderEditIcon
Worldsoft Logo
Menu
blockHeaderEditIcon

Anleitung Buttons

Benötigt: HTML und CSS.

Denn ganzen Code fügen sie bitte in einen Block ein. Dazu müssen sie einen neuen Block erstellen und dann unterdem Reiter „Quellcode“ denn ganzen Code einfügen.
(Beispiel finden sie auf dieser Seite)

Erklärung:

Buttons

Um Buttons zu erstellen muss man zwei Sachen beachten. Erstens muss eine Class vergeben werden im HTML-Bereich. Zweitens muss diese Class im CSS mit den gewünschten Einstellungen vergeben werden.

Der blau markierte Bereich ist eine normale Class.

Der rot markierte Bereich ist eine Class die vergeben werden muss falls man die Icons von dieser Website: www.fortawesome.github.io/Font-Awesome/icons/ verwenden will. Dazu folgt dann noch die Class von dem gewünschten Icon. (Diese Class kann man auf der Website finden indem man auf das gewünschte Icon klickt).

Erklärung der verwendeten CSS Befehle für die Icons:
1 font-size:18px; definiert die Grösse der Schrift/Icons
2 color:#fff; definiert die Farbe der Schrift/Icons
3 background:#000; definiert den Hintergrund indem sich das Icons befindet
3 padding:15px; bildet den Innenabstand
4 border-radius:4px; vergibt den Ecken eine Rundung
4 -webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.4s;
das ist die Animation welche bei einem Hover geschieht. Der Übergang von der normalen Farbe zu der hover Farbe
Code-Download: Buttons-Code
Bootstrap Buttons: www.getbootstrap.com/css/#buttons
backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon
Benutzername:
User-Login
Ihr E-Mail