[CSS] Buttons ✤✤✤

Halli Hallo =)
Ja, ich bin grad fleissig. Bevor es nach Schottland geht, denk ich jetzt mal nicht an Schule, sondern schreib lieber noch ein Tutorial für euch. ^^
Diesmal geht es um Buttons!
Und hier das Ergebnis:

Button

Der Code ist eeeeewig, weil das alles noch für jeden einzelnen Browser definitert werden muss. Aber ich erklär euch grundsätzlich was hier was macht =)

Oh und das Tutorial ist wieder aufgrund des Ursprungscodes von

5202

Oliver hat dort das Linklistengadget verschönert und ich hab den Code so angepasst, dass er allgemein funzt. Wenn ihr aber wissen wollt, wie ihr direkt Linklisten verändern könnt, klickt auf den Button!
Okay. Also zuerst natürlich, wo ihr den Code braucht. Wenn ihr den Code überall verwenden wollt, würd ich definitiv empfehlen ihn beim Vorlagendesigner reinzukopieren, ansonsten geht das natürlich auch immer in einem HTML-Gadget oder Post.
Dann müsstet ihr den ganzen Code in folgende Tags packen:
 <style="text/css"> </style>

Okay, legen wir los.
Zu Beginn haben wir einen Link, dem wir eine Hintergrundfarbe, eine Grösse und eine Textfarbe geben. Ausserdem soll das Unterstreichen des Links weg sein. Dann kommt noch bisschen Blabla, welches den Rand des Buttons markiert.
Der Code schaut dann so aus:
#button a{
 background-color:#ff6b7c;
 font-size:20px;
 text-decoration:none;
 color:#fff;
 position:relative;
}
Oh und unser Button momentan so:

Button

Als nächstes bekommt der Button ein Gradient um ihn etwas dynamischer aussehen zu lassen.
Der Code dafür muss eben für alle Browser angepasst werden, aber eigentlich bedeutet jede Zeile das Gleiche. Erste Farbe zu zweite Farbe in nem Gradient. Ausserdem runden wir die Ecken ab (und wieder viel Code, aber nur eine Aussage in verschiedenen Formulierungen)
#button a{
background-image: -webkit-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
       background-image: -moz-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
        background-image: -ms-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
         background-image: -o-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
            background-image: linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}

Der Button schaut nun so aus:

Button

Der nächste Schritt ist ein Schatten, damit der dreidimensionale Effekt nachher noch besser rüberkommt:
#button a{
-webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
}

Und das ist alles für die Linkoptik. Unser Button schaut also in der Grundbeschreibung folgendermassen aus:

Button

Als nächstes gehen wir zum Hover über. Also zum Aussehen des Buttons, während wir mit der Maus drüber schweben.
Der Hover soll folgendes tun. Er soll das Gradient umkehren und den Schatten verkürzen. Ausserdem soll er 3px nach unten rücken.
Im Code hat das also ein Wechsel der Farbcodes zur Folge, sowie eine Schattenverkürzung. Die 3px werden einfach mit top angegeben.
#button a:hover{
 top:3px;
    background-image: -webkit-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
       background-image: -moz-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
        background-image: -ms-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
         background-image: -o-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
            background-image: linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
}


Und das ist alles. Der Button könnte so eigentlich fertig sein (drüberfahren um die Änderung zu sehen)

Button

Aber, um den Effekt noch cooler zu machen, gibt's dieses tolle Pfeilchen. Und wie das hinzukommt, folgt jetzt.

Dieses kleine Pfeilchen ist eigentlich einfach ein leeres Element, welches hinzugefügt wird. Und hier der Code für den Link allgemein:
Zuerst bestimmt ihr die Farbe des Kreises. Der Link ist für den Pfeil. Dann werden einfach Grösse und Postion definiert. Dann wird aus dem Quadrat ein Kreis und auch hier werden wieder Schatten hinzugefügt um den ganzen 3D-Effekt zu gestalten.
#button a::before {
 background-color:#c10031;
 background-image:url(http://goo.gl/7wjMb);
 background-repeat:no-repeat;
 background-position:center center;
 content:"";
 width:20px;
 height:20px;
 position:absolute;
 right:15px;
 top:50%;
 margin-top:-9px;
 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
      -o-border-radius: 50%;
            border-radius: 50%;
 -webkit-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
    -moz-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
      -o-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
         box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
}

Okay. Das ganze schaut jett folgendermassen aus:

Button

Und nun der letzte Schritt CSS. Der Hover für den Kreis mit dem Pfeil. Hier passiert der wahre 3D-Effekt!
#button a:hover::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
}

Und das ist sie. Die gesamte CSS. Und so schaut's aus:
#button a{
 background-color:#ff6b7c;
 font-size:20px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 50px 10px 20px;
    background-image: -webkit-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
       background-image: -moz-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
        background-image: -ms-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
         background-image: -o-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
            background-image: linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
}
#button a:hover{
 top:3px;
    background-image: -webkit-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
       background-image: -moz-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
        background-image: -ms-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
         background-image: -o-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
            background-image: linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
}
#button a::before {
 background-color:#c10031;
 background-image:url(http://goo.gl/7wjMb);
 background-repeat:no-repeat;
 background-position:center center;
 content:"";
 width:20px;
 height:20px;
 position:absolute;
 right:15px;
 top:50%;
 margin-top:-9px;
 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
      -o-border-radius: 50%;
            border-radius: 50%;
 -webkit-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
    -moz-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
      -o-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
         box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
}
#button a:hover::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
}

Okay. Jetzt haben wir die CSS, doch wie kriegen wir die Buttons hin?
Dafür braucht ihr zu allererst einen Link.
<a href="LINK"> Button </a>
diesen Link müsst ihr in einen <div>-Container packen.
<div><a href="LINK"> Button </a> </div>
Und damit nun auch das CSS verwendet wird, welches den Button definiert, müssen wir dem Container eine id geben. DIese id ist das, was wir mit dem Hashtag (#) definitert haben. Also button.
Der Button wird also angezeigt wenn wir folgendes eingeben:
<div id="button"> <a href="LINK"> Button </a> </div>

Ich führ wieder nach oben

Und das war's auch schon =)
Ich find die Buttons total toll und werd sicher Verwendung dafür finden, ich hoffe der ein oder andere von euch auch.

Und hier noch eine kleine Variation, wie der Button auch aussehen könnt ^^

Mit Herzchen ^^