Hier bei Design Shack möchten wir Ihnen eine ganze Reihe von Tutorials anbieten, von fachkundigen PHP-Projekten bis zu einfachen CSS-Tipps. Das heutige Tutorial richtet sich an diejenigen, die sich noch in der Anfangsphase von CSS befinden.
Eine der häufigsten Fragen, die ich von CSS-Anfängern bekomme, lautet: Wie erstelle ich eine Schaltfläche? Es ist eine einfache Frage mit einer komplizierten Antwort. Es gibt einige Möglichkeiten, es zu lösen, und leider gibt es auch einige Möglichkeiten, etwas falsch zu machen. Als ich mit CSS anfing, war das Herausfinden der gesamten Schaltflächensyntax eines der hartnäckigsten Probleme, mit denen ich konfrontiert war. Es schien, als würde ich es immer falsch machen. Heute durchlaufen wir einen sehr einfachen und flexiblen Prozess, den Sie auf jede Schaltfläche anwenden können, die Sie erstellen. Wichtiger als das Endergebnis ist die ausführliche Erklärung an jedem Punkt, aus der hervorgeht, warum wir das so machen.
Schritt 1: Das HTML
Ob Sie es glauben oder nicht, das ist einer der schwierigsten Teile. Für einen erfahrenen Programmierer erscheint es so einfach. Für einen Anfänger kann es jedoch schwierig sein zu wissen, wo man mit einem Knopf anfängt. Solltest du die? -Taste verwenden? HTML-Tag? Oder vielleicht ein Absatz-Tag? Welche Teile sollte der Link umlaufen?
Es stellt sich heraus, dass die einfachste und am weitesten verbreitete Syntax nur die Implementierung eines einfachen alten Ankertags ist (Formularschaltflächen verwenden häufig "Eingabe"). Aus funktionaler Sicht ist alles, was wir wirklich zu erstellen versuchen, ein Link, der uns beim Anklicken an einen neuen Ort führt. Genau das macht ein einfacher HTML-Link. Im Webdesign ist die Entscheidung, etwas in einen Button zu verwandeln, oft nur eine ästhetische und weist nicht unbedingt auf eine spezielle Funktionalität hin.
Hier ist ein weit verbreitetes HTML-Snippet, das die Aufgabe perfekt erledigt und dabei kurz und bündig bleibt:
Wenn Sie keine Div brauchen, verwenden Sie keine
Ein Problem, dem ich beim ersten Programmieren begegnet bin, ist, dass ich oft dachte, ich brauche ein div, um etwas zu erstellen. Mit dieser fehlerhaften Logik würde ich meinen Anker in ein div einwickeln und dann den größten Teil des Stylings auf das div anwenden.
Dies ist jedoch völlig unnötig und kann sowohl beim Klicken als auch beim Schweben zu Problemen führen. Im obigen Beispiel wird unser gesamtes Element der Link sein. Wenn wir dies in ein div einpacken und das so gestalten, wäre nur der Textteil der Schaltfläche ein Link, was bedeutet, dass der Benutzer die Schaltfläche ohne Ergebnis anklicken könnte.
Warum eine Klasse verwenden?
Das Wichtigste an diesem Codefragment ist vielleicht, dass wir eine Klasse hinzugefügt haben, die ich allgemein als? -Taste bezeichnet habe. Dafür gibt es mehrere Gründe.
Zunächst benötigen wir eine Möglichkeit, diese Schaltfläche in unserem CSS anzuvisieren und zu gestalten, ohne notwendigerweise auf alle Ankertags auf der Seite zu zielen. Es ist fast nie der Fall, dass Sie möchten, dass jeder einzelne Link eine identische Schaltfläche ist. Es ist jedoch machbar und es ist sehr wahrscheinlich, dass Sie den Schaltflächenstil irgendwann wiederverwenden möchten. Aus diesem Grund wenden wir eine Klasse anstelle einer ID an. Wenn wir also einen Klartext-Link in einen schönen Button umwandeln wollen, verwenden wir einfach den? Button? Klasse und wir sind fertig!
Schritt 1 Vorschau
An dieser Stelle sollten Sie nur einen Nur-Text-Link mit Standardstil haben.
Schritt 2: Grundlegende Schaltflächenstile
Jetzt, da wir unseren HTML-Code fertig haben, ist es an der Zeit, zum CSS überzugehen. Denken Sie daran, dass wir eine? -Taste? Klasse für den ausdrücklichen Zweck von CSS-Targeting, verwenden Sie sie also für diesen Schritt:
Das erste, was wir in unserem CSS machen wollen, ist die grundlegende Box, die unsere Button-Form ausmachen soll. Hier sind die Stile, die ich verwendet habe. Bitte beachten Sie, dass meine Farbauswahl und -abmessungen vollständig optional sind. Sie können jederzeit das verwenden, was Sie möchten.
Das Wichtigste, was ich hier gemacht habe, war "Anzeige". blockieren?. Dadurch können wir unseren Textlink in eine größere Box mit definierter Breite und Höhe umwandeln. Danach stelle ich einfach meine Größe und Hintergrundfarbe ein und fügte einen Rand hinzu. Ich benutze? Rgba? Wenn Sie dies für ältere Browser etwas freundlicher gestalten möchten, lesen Sie diesen Artikel zur Erklärung von rgba-Fallbacks.
Schritt 2 Vorschau
Nach Schritt 2 sollten Sie ein recht langweiliges Feld mit unleserlichem Text haben.
Schritt 3: Textstile
Als nächstes ist es Zeit, den hässlichen Text anzugreifen. Um sicherzustellen, dass Sie mit jedem Schritt Schritt halten können, füge ich einfach das hinzu, was wir zuvor mit Kommentaren erstellt haben, um Ihnen zu helfen, jeden Schritt zu sehen:
Hier sehen wir, dass ich eine Textfarbe hinzugefügt habe, die im Wesentlichen eine dunklere Schattierung der Schaltflächenfarbe darstellt. Diesen Trick erreichen Sie, indem Sie die Textfarbe auf schwarz setzen und die Deckkraft über rgba verringern. Als Nächstes zentriere ich den Text in der Mitte und deklariere eine Reihe von Dingen mit der Schriftsatzschrift.
Schriftkürzel
Die CSS-Abkürzung ist eine nette Möglichkeit, eine Reihe von CSS-Eigenschaften und -Stilen in einer Zeile zu deklarieren. Zuerst habe ich das Gewicht (fett) angegeben, dann die Schriftgröße / Zeilenhöhe und schließlich die Schriftfamilie. Beachten Sie, dass die Zeilenhöhe genau auf die Schaltflächenhöhe eingestellt ist. Dies ist eine einfache Möglichkeit, um sicherzustellen, dass der Text vertikal zentriert ist.
Weitere Informationen zu CSS Shorthand finden Sie unter 6 CSS Shorthand-Tricks, die jeder Entwickler kennen sollte.
Schritt 3 Vorschau
Nach Schritt 3 sollte Ihr Button tatsächlich wie ein Button aussehen!
Schritt 4: Fancy CSS3 Styles
Der vorherige Schritt führt uns zu einem schönen, funktionierenden Button, der nicht schlecht aussieht. Leider ist es ziemlich langweilig. Das Wichtigste ist jedoch, dass diese Schaltfläche in den meisten Browsern perfekt aussehen sollte. Daher können wir jetzt einige neuere CSS-Werte hinzufügen, ohne sich zu sehr darum zu sorgen, dass ältere Browser zurückgelassen werden. Letztendlich macht es mir nichts aus, wenn der IE die nächsten Stile abschneidet, da meine Schaltfläche für die Benutzer in ihrem aktuellen Zustand gut funktionieren sollte.
Wir können uns leicht mitreißen und fünfzig Zeilen CSS schreiben, um unseren Button glänzend und hübsch zu machen, aber ich halte es für heutige Zwecke sehr einfach:
Jeder von ihnen kann schwierig zu lesen sein, also gehen wir sie einzeln durch. Zuerst fügte ich einen Farbverlauf hinzu, der die bereits vorhandene Farbe verwendet und zu einem winzigen Farbton dunkler wird. Ich habe in meiner vorherigen Hintergrundfarbe über diesem Abschnitt gelassen, um als Fallback zu fungieren.
Als nächstes ist der Grenzradius. Ich entschied mich für eine wirklich schwere abgerundete Ecke, die dem Knopf eine Pillenform verleiht. Da alle Ecken gleich sein sollen, erkläre ich einfach einen Wert und er wird einheitlich angewendet.
Schließlich warf ich einige Schatten ein. Sowohl die Box als auch der Textschatten, den ich verwendet habe, sind etwas eigenartig. Für den Schatten der Box gab a einen vertikalen Versatz, aber keinen horizontalen Versatz, und beließ die Federung bei 0. Dies ergibt einen schönen kleinen faux 3D-Effekt, der nicht zu viel Arbeit oder Code erfordert. Für den Textschatten habe ich auch einen vertikalen Versatz angewendet und die Farbe bei 20% Deckkraft auf Weiß gesetzt. Dies ist eine sehr einfache Möglichkeit, um einen Letterpress-Effekt zu erstellen und den Text so aussehen zu lassen, als würde er in die Schaltfläche sinken.
Verwenden Sie Prefixr für Browserpräfixe
Beachten Sie, dass der obige Code überhaupt nicht Cross-Browser-kompatibel ist. In den Anfangsstadien des Experimentierens hasse ich es, meinen Code mit einem halben Dutzend Browser-Präfixen zu überlisten und vergesse oft, ob ein bestimmter Browser eine eindeutige Syntax hat oder nicht.
Sobald ich die Dinge in Espresso (meiner bevorzugten IDE) mit der einfachen Syntax so aussehen kann, wie ich möchte, kann ich den gesamten Code in ein kleines kostenloses Tool namens Prefixr werfen, das es verarbeitet und meinen Code mit allem ausspuckt Die korrekten verfügbaren browserspezifischen Versionen werden automatisch hinzugefügt.
Schritt 4 Vorschau
Nach Schritt 4 sollte Ihre Schaltfläche viel schärfer aussehen als zuvor. Fast fertig!
Schritt 5: Hover-Styles
Der letzte Schritt in unserem Button-Prozess ist die Definition des Schwebeflugverhaltens. Wenn der Benutzer den Mauszeiger über die Schaltfläche bewegt, ist es immer schön, ein kleines visuelles Feedback zu erhalten, das über der Standardeinstellung des Cursors liegt. Wieder einmal könnten wir damit ausgehen, aber ich werde es einfach halten und den Verlauf ein wenig aufhellen:
Wenn Sie den Mauszeiger über die Schaltfläche bewegen, ändert sich die Farbe / Helligkeit. Es ist ein subtiler Effekt, aber definitiv stark genug für jeden Benutzer, selbst wenn er farbenblind ist.
Fertig!
Nach Schritt 5 sind Sie fertig! Sie sollten jetzt einen schönen Button haben, der vollständig mit CSS und HTML erstellt wurde. Noch wichtiger ist jedoch, dass Sie ein starkes Gefühl für den grundlegenden Arbeitsablauf haben sollten, um eine Schaltfläche mit CSS zu erstellen.
Demo: Um die Schaltfläche in Aktion zu sehen, klicken Sie hier oder auf das Bild oben.
jsFiddle: Klicken Sie hier, um mit dem Code zu arbeiten.
Fazit
Wir haben heute viele sehr wichtige Dinge gelernt. Erstens haben wir gesehen, dass wir ein einfaches HTML-Ankertag als Ausgangspunkt für unsere Schaltfläche verwenden können und dass es gut ist, Schaltflächen mit wiederverwendbaren Klassen zu gestalten. Wir haben auch gelernt, wie man eine einfache Schaltfläche gestaltet, die in allen Browsern gut funktioniert, und später noch mehr Flair hinzufügt, anstatt die gesamte Struktur der Schaltfläche auf Techniken zu stützen, die nicht allgemein zugänglich sind. Schließlich haben wir gesehen, wie man die Dinge einfach halten kann, indem man mit den grundlegenden CSS3-Eigenschaften codiert, bis wir alles richtig gemacht haben, und dann einen Abstecher nach Prefixr machen, der unseren Code auf etwas so Cross-Browser-kompatibles wie möglich erweitert.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Wenn Sie ein Anfänger sind, war das für Sie hilfreich? Wenn Sie ein erfahrener Profi sind, was würden Sie anders machen?