CSS Button Set Tutorial
Allgemeine Regeln
Lassen Sie uns zunächst unsere allgemeinen Schaltfläche Regeln (mit einer .btn Klasse). Wir wollen, dass alle unsere Tasten einen farbigen Hintergrund haben, wird der innere Text Bedeutung weiß. Die Schaltfläche sollte es Text ist schön und zentriert, zusammen mit einigen runden Ecken, ein schönes Top-Highlight und eine Standardhöhe.
Wenn Sie „voll“ Kompatibilität wollen, denken Sie daran Browser-Präfixe für border-radius und box-shadow hinzuzufügen. aber der Einfachheit halber, ich habe sie hier weggelassen. Das box-shadow verwendet einen sehr subtilen, 1px dicken Wert in einem halbtransparenten weißen, einen RGBA-Wert.
es wäre so etwas wie folgt aussehen:
So weit, ist es gut. Allerdings haben wir keine CSS-Taste soll so eingestellt, dass klar sein, wollen wir etwas Farbe! Also lassen Sie uns noch ein paar Klassen in unserem CSS machen:
Wünschen Sie verschiedene Größen? Kein Problem, alles, was wir brauchen, sind einige zusätzliche Klassen unsere Schaltfläche Set Höhe und Polsterung anzupassen:
Und damit können Sie Ihre Farben mit Größen mischen und zusammenbringen!
Last, but not least, wäre es eine gute Idee, einige schweben (mouse over) haben und aktiv (Maus nach unten) Staaten. Sie können dies pro Farbe tun, wenn Sie wie es sich anfühlte, aber wir werden durch die Verwendung eines zusätzlichen Schatten als „fake gradient“ über die gesamte Schaltflächenset einen einfacheren Ansatz (die auch uns verschiedene Zeilen CSS sparen).
Sie werden bemerken wir einen zweiten Wert hinzugefügt haben (durch Komma getrennt) zu unserem ursprünglichen Schatten, aber diesmal einen größeren Schatten, eine helle und eine dunkle für jeden Zustand gelten. Damit stellen Sie Ihren Knopf ist einsatzbereit! Um mit einem Live-Beispiel aus diesem CSS-Taste Tutorial zu spielen, können Sie es überprüfen hier.
Russell Taylor ist ein Computer-Ingenieur und Internet-Aficionado. Er ist bereits seit mehr als 10 Jahren in der Web-Design / Entwicklung der Industrie zu arbeiten und genießt die Freiheit eines Auftrags aus dem Büro entfernt.