Eine Einführung in die Grundlagen moderner CSS -Tasten

Button Design der Webseite: Drei Stile und CSS -Implementierung

Dieser Artikel wurde am 9. Juli 2016 aktualisiert und das <a></a> -Tag durch <button></button> Tag ersetzt, um die Best Practices der modernen Barrierefreiheit zu entsprechen. Wenn Sie an Tasten arbeiten, bleiben Sie immer beim <button></button> -Tag.

Die

-Beschaltflächen sind eine der wichtigsten Komponenten jeder Webseite, und sie haben viele verschiedene Zustände und Funktionen, die alle korrekt mit früheren Entwurfsentscheidungen abgestimmt werden müssen. In diesem Artikel werden wir drei Button -Design -Konzepte sowie CSS -Code und Tools einführen, mit denen neue Entwickler ihre eigenen Schaltflächen erstellen können.

Bevor wir uns mit verschiedenen Konzepten für Button -Design eintauchen, müssen wir einige Grundkenntnisse über CSS -Schaltflächen überprüfen. Wenn Sie nicht wissen, welche CSS -Komponenten sich ändern werden, ist es nicht sinnvoll, den Unterschied im Denken zwischen abgeflachtem UI und Materialdesign zu verstehen.

Lassen Sie uns die Grundlagen der CSS -Schaltflächen schnell überprüfen.

Schlüsselpunkte

• Verwenden von <button></button> -Tags ist eine empfohlene Möglichkeit, Schaltflächen in Modern Barrierefreiheit Best Practices zu verarbeiten.
• Ein gutes Button -Design sollte die Zugänglichkeit sicherstellen, die Schaltfläche sollte für Menschen mit Behinderungen und Benutzern, die ältere Browser verwenden, leicht zugänglich sein und einfachen Text enthalten, damit der Benutzer den Zweck der Schaltfläche sofort verstehen kann.
Die drei Hauptelemente des
• -Bastens sind Farb-, Schatten- und Übergangszeiten, die mit CSS-Pseudoklassen wie :hover und :active betrieben werden können.
• Dieser Artikel enthält Beispiele für drei Schaltflächenstile: einfache Schwarz -Weiß -Tasten, flache UI -Schaltflächen und Materialdesign -Tasten mit jeweils eine eigene eindeutige Designmethode.
• Um Ihr eigenes Button -Design zu erstellen, wird empfohlen, Tools wie den CSS3 -Schaltflächengenerator zu verwenden.

CSS -Schaltfläche Grundlagen

Die Definition guter Schaltflächen variiert von Website zu Website, aber es gibt einige nichttechnische Standards:

1. Barrierefreiheit - Dies ist das Wichtigste. Die Schaltfläche sollte von Menschen mit Behinderungen und Benutzern, die ältere Browser verwenden, leicht zugänglich sein. Die Offenheit des Netzwerks ist wunderschön, zerstören Sie es nicht mit nachlässigen CSS.
2. Einfacher Text - Halten Sie den Text kurz und löschen. Der Benutzer sollte in der Lage sein, sofort zu verstehen, was die Schaltfläche ist und wo sie sie benötigen.

Fast alle Schaltflächen, die Sie online sehen, verwenden Sie einige Variationen von Farbänderungen, Konvertierungszeiten sowie Grenzen und Schattenänderungen. Diese können mit verschiedenen CSS-Pseudoklassen ausgenutzt werden. Wir werden uns auf zwei von ihnen konzentrieren - :hover und :active. :hover Pseudoklasse definiert, wie sich CSS ändern sollte, wenn sich die Maus über ein Objekt hinweg hebt. :active am häufigsten zwischen dem Benutzer durchgeführt, der die Maustaste drückt und die Maustaste veröffentlicht wird.

Die gesamte Anzeige einer Taste kann mit einer Pseudoklasse geändert werden, aber dies ist kein benutzerfreundlicher Ansatz. Eine gute Strategie für Anfänger besteht darin, kleine oder einfache Änderungen an den grundlegenden Elementen des Knopfes vorzunehmen und gleichzeitig den Knopf vertraut zu halten. Die drei Hauptgrundelemente einer Taste sind Farb-, Schatten- und Konvertierungszeiten.

Grundelement 1 - Color

Dies ist die häufigste Veränderung. Wir können die Farben verschiedener Attribute ändern, die einfachsten Attribute sind color, background-color und border Eigenschaften. Bevor wir zum Beispiel springen, konzentrieren wir uns zunächst darauf, wie die Schaltflächenfarbe ausgewählt wird:

1. Farbkombination - Verwenden Sie komplementäre Farben. Colorhexa ist ein hervorragendes Werkzeug, um herauszufinden, welche Farben zusammen verwendet werden können. Wenn Sie immer noch nach Farben suchen, lesen Sie den Flat UI Color Picker.
2. Passen Sie Ihre Palette an - es ist normalerweise am besten, um zu jeder von Ihnen verwendeten Palette zugeordnet zu werden. Wenn Sie immer noch nach einer Farbpalette suchen, sehen Sie sich Lolcolors an.

Grundelement 2 - Shadow

Mit

box-shadow können Sie Schatten um Objekte hinzufügen. Auf jeder Seite kann ein einzigartiger Schatten hinzugefügt werden, und die abgeflachte Benutzeroberfläche und das Materialdesign nutzen die Idee. Um mehr über box-shadow zu erfahren, überprüfen Sie bitte die MDN box-shadow -Dokumentation.

Grundelement 3 - Übergangsdauer

Mit

transition-duration können Sie Zeitskalen für CSS -Änderungen hinzufügen. Eine Schaltfläche ohne Konvertierungszeit wird sofort in die :hover cs geändert, was für den Benutzer möglicherweise beleidigend ist. Viele der Schaltflächen in diesem Leitfaden verwenden die Konvertierungszeit, um ein natürliches Gefühl zu schaffen.

Das folgende Beispiel konvertiert den Schaltflächenstil auf weiche Weise (über 0,5 Sekunden), wenn :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

Der Code zum Ausführen der Konvertierung ist kompliziert, sodass die alten Browser die Konvertierung geringfügig anders umgehen. Daher müssen wir Anbieterpräfixe für ältere Browser einbeziehen.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Löschen Sie den Standard -Taste -Stil

<button> Um die Standard -Browserstile aus den

Elementen zu entfernen, damit wir ihnen benutzerdefinierte Stile zur Verfügung stellen können, schließen wir das folgende CSS ein:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

Es ist jedoch besser, es auf Klassen auf Tastenelementen anzuwenden, als auf alle Schaltflächen standardmäßig.

Es gibt viele komplexe und interessante Möglichkeiten, um zu ändern, wie Sie Ihr CSS ändern können, und diese schnelle Überprüfung deckt nur die Grundlagen ab.

Drei -Tasten -Stile

1 - einfache Schwarz -Weiß -Knöpfe

Dies ist normalerweise die erste Taste, die ich in meinem Nebenprojekt hinzufüge, da seine Einfachheit in einer Vielzahl von Stilen funktioniert. Dieser Stil nutzt den natürlichen perfekten Kontrast von Schwarz und Weiß.

Diese beiden Änderungen sind sehr ähnlich, sodass wir den Code nur mit einer schwarzen Taste mit einem weißen Hintergrund einführen. Um einen weiteren Knopf zu bekommen, drehen Sie einfach jedes Weiß und Schwarz um. <🎜>

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

Im obigen Stil sehen Sie die Schriftart und background-color in beiden Richtungen über die Dauer der Umwandlung. Dies ist ein sehr einfaches Beispiel. Um von hier aus zu bauen, können Sie die Farben Ihrer Lieblingsmarke als Inspiration verwenden. Die Verwendung von BrandColors ist eine großartige Möglichkeit, Farben dieser Art von Marke zu finden. .2s

2 - flache UI -Taste

Flat UI konzentriert sich auf Minimalismus und erzählt eine große Geschichte durch kleine Aktionen. Sobald mein Projekt Gestalt annimmt, migriere ich normalerweise vom Schwarzweißknopf zum abgeflachten UI -Knopf. Die flachen UI -Tasten sind einfach genug, um in die meisten Designs zu passen.

Verbessern wir unsere vorherigen Schaltflächen, indem Sie Taste bewegt werden, um 3D -Schaltflächen zu simulieren.

Dieses Beispiel enthält fünf Schaltflächen, aber da die einzige Änderung die Farbe ist, werden wir uns auf die erste Taste konzentrieren.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Diese Schaltfläche enthält drei Zustände: allgemeiner (staatsloser Name),

und :hover. :active

Es ist erwähnenswert, dass

nur eine Codezeile enthält, um die Opazität zu verringern. Dies ist ein nützlicher Trick, damit die Schaltfläche leichter aussieht, ohne dass Sie eine neue, tatsächlich leichtere Farbe finden. :hover

CSS -Variablen sind nicht neu, einige werden jedoch auf neue Weise verwendet.

ist keine durchgezogene gleichmäßige Linie, sondern verwendet border, border-bottom und border-left, um 3D -Tiefeneffekte zu erzeugen. border-right

flache UI -Tasten werden weit verbreitet

. Wenn unsere Beispieltaste :active wird, passieren zwei Dinge. :active

1. Wechseln Sie von 3px auf 1px. Dadurch wird der Schatten unterhalb der Taste schrumpfen und das gesamte Tastenobjekt um mehrere Pixel nach unten verschoben. Obwohl diese eine Änderung einfach ist, hilft es dem Benutzer, das Gefühl zu haben, auf die Schaltfläche in die Seite zu klicken. border-bottom
Die Farbe ändert sich. Die Hintergrundfarbe wird dunkel, simuliert die Bewegung physikalisch vom Benutzer weg und tritt die Seite ein. Auch diese subtile Änderung erinnert den Benutzer daran, dass er auf eine Schaltfläche klickt.

flache UI -Tasten schätzen einfache und minimale Bewegungen, die große Geschichten erzählen. Viele verwenden

, um eine flache Bewegung zu erstellen. Es ist erwähnenswert, dass sich einige flache UI -Tasten überhaupt nicht bewegen und nur Farbwechsel nutzen. border-bottom

3 - Materialdesign

Materialdesign ist ein Designkonzept, das Informationskarten und Funktionen überzeugende Aktionen fördert. Google hat das Konzept des "Materialdesigns" entwickelt und drei Hauptprinzipien auf der Homepage für Materialdesign aufgelistet:

Material ist eine Metapher
fett, grafisch, zielgerichtet
Sport geben Bedeutung

Um diese drei Prinzipien besser zu verstehen, schauen wir uns die praktische Anwendung des Materialdesigns an.

Hinweis: Dieses Beispiel enthält nicht das -Tag, da es den Taste des Polymers -Standard -Tags folgt. Wenn Sie jedoch Polymer in einem großen Projekt implementieren, lohnt es sich, die Verwendung des <button> -Tags in Ihrer Implementierung zu untersuchen Anstelle des <button> -Tags. Wir werden dies in zukünftigen Artikeln ausführlicher untersuchen. <a>

Diese Schaltflächen verwenden zwei Hauptideen - box-shadow und Polymer.

Polymer ist ein Rahmen von Komponenten und Tools, um Websites zu entwerfen. Wenn Sie mit Bootstrap vertraut sind, ist Polymer sehr ähnlich. Der oben gefundene leistungsstarke Ripple -Effekt kann in nur einer Codezeile hinzugefügt werden.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<paper-ripple fit></paper-ripple> ist eine Polymerkomponente. Durch den Importieren von Polymer zu Beginn von HTML können wir auf beliebte Frameworks und deren Komponenten zugreifen. Erfahren Sie mehr über die Homepage der Polymer -Projekt.

Jetzt, da wir verstehen, was Polymer ist und woher die Wellen stammen (wie es funktioniert, ist eine andere Geschichte), lassen Sie uns CSS diskutieren, die dazu beitragen, Materialdesignprinzipien zu implementieren, um die Schaltfläche hervorzuheben.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Diese Schaltflächen verwenden box-shadow, um den größten Teil des Designs zu erreichen. Schauen wir uns an, wie sich box-shadow seine Magie verändert und spielt, indem wir alle CSS entfernen, die sich nicht ändern:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

box-shadow wird verwendet, um einen dünnen Schatten links und unten bei jedem Taste zu platzieren. Beim Klicken erstrecken sich die Schatten weiter und werden weniger dunkel. Diese Aktion simuliert den 3D -Schatten der Schaltfläche, die von der Seite zum Benutzer springt. Diese Aktion ist Teil der Materialdesignstile und deren praktische Anwendungsprinzipien.

Materialdesign -Schaltflächen können durch Kombinieren von Polymer mit box-shadow Effekten hergestellt werden.

• Material ist eine Metapher-durch Verwendung von box-shadow können wir 3D-Schatten simulieren, die in realen Objekten
erscheinen
• fett, grafisch, zielgerichtet - dies ist realistischer für leuchtend blaue und grüne Tasten, und diese Tasten befriedigen das völlig.
• Bewegung gibt eine Bedeutung - Verwenden von Polymer- und box-shadow -Erversions können wir viel Bewegung erstellen, wenn der Benutzer auf eine Schaltfläche klickt.

In diesem Artikel wird beschrieben, wie drei verschiedene Designmethoden verwendet werden, um Schaltflächen zu erstellen. Wenn Sie Ihren eigenen Button -Design -Prototyp erstellen möchten, empfehle ich, den CSS3 -Schaltflächengenerator zu verwenden.

Schlussfolgerung

Schwarz -Weiß -Knöpfe sind einfach und zuverlässig. Ersetzen Sie Schwarz und Weiß durch die Farben Ihrer Marke, um einen schnellen Zugriff auf Schaltflächen im Zusammenhang mit Ihrer Website zu erhalten. Flache UI -Tasten sind einfach und verwenden kleine Aktionen und Farben, um große Geschichten zu erzählen. Der Materialdesign -Taste verwendet massive komplexe Aktionen, um die Schatten der realen Welt zu simulieren und so die Aufmerksamkeit der Benutzer auf sich zu ziehen.

Ich hoffe, dieser Leitfaden hilft CSS -Anfängern, die Bausteine ​​zu verstehen, die Tasten so mächtig und kreativ machen.

Häufig gestellte Fragen zu modernen CSS -Schaltflächen

Wie erstelle ich eine einfache CSS -Taste?

Erstellen einer einfachen CSS -Schaltfläche Beinhaltet das Definieren einer Klasse in Ihrer CSS -Datei und das Anwenden von Schaltflächenelementen in der HTML -Datei. Zum Beispiel können Sie eine .button -Klassel in einer CSS -Datei definieren, die Attribute wie background-color, color, border, padding, text-align, text-decoration, display, , cursor, .button und .button usw.. In der HTML -Datei können Sie dann ein Schaltflächenelement erstellen und die

-Klasses anwenden. Dadurch wird die Schaltfläche gemäß den in der

-Klass festgelegten Eigenschaften gestylt.

Wie fügt ich der CSS -Taste einen Schwebeffekt hinzu? :hover :hover Sie können die Pseudo-Klasse

verwenden, um der CSS-Taste einen Schwebeffekt hinzuzufügen. Diese Pseudoklasse wird verwendet, um den Stil des Elements auszuwählen und festzulegen, wenn der Benutzerzeiger darüber schwebt. Wenn der Benutzerzeiger beispielsweise darüber schwebt, können Sie die Hintergrundfarbe und die Textfarbe der Schaltfläche ändern, indem Sie diese Eigenschaften in der Pseudoklasse der Button-Klasse

pseudo definieren.

Wie erstelle ich eine CSS -Taste mit einem Symbol?

CSS -Schaltflächen mit Symbolen können durch Verwendung von Symbolschriften oder SVG -Symbolen erstellt werden. Icon -Schriftarten wie Schriftart Awesome bieten eine Vielzahl von Symbolen, die mit CSS leicht zu stylen sind. Um Symbolschriften zu verwenden, müssen Sie die CSS -Datei der Icon -Schriftart in die HTML -Datei aufnehmen und dann die entsprechende Klasse des Symbols verwenden, das Sie verwenden möchten. Andererseits können SVG -Symbole direkt in HTML -Dateien eingebettet und mit CSS gestylt werden.

Wie erstelle ich eine CSS -Taste mit Gradienten? linear-gradient() radial-gradient() CSS -Schaltflächen mit Gradienten können mit der Funktion

oder

erstellt werden. Diese Funktionen werden verwendet, um lineare Gradienten bzw. radiale Gradienten zu definieren. Ein Gradienten wird durch zwei oder mehr Farbstopppunkte definiert, in denen sich der Gradient umwandelt. Der Farbstopppunkt wird durch die Farbe und die Farbposition entlang der Gradientenlinie definiert.

Wie erstellt man CSS -Tasten mit abgerundeten Ecken? border-radius border-radius CSS -Schaltflächen mit abgerundeten Ecken können mit dem Attribut

erstellt werden. Diese Eigenschaft wird verwendet, um den Radius der Grenzecke zu definieren. Der Wert des

-attributs kann in Pixel oder Prozentsätzen angegeben werden. Ein höherer Wert erzeugt eine abgerundete Ecke.

Wie erstelle ich eine CSS -Taste mit Schatten? box-shadow box-shadow CSS -Schaltflächen mit Schatten können mit dem Attribut

erstellt werden. Diese Eigenschaft wird verwendet, um Schatteneffekte auf Elemente anzuwenden. Die

Eigenschaft nimmt mehrere Werte an, einschließlich des horizontalen Versatzes des Schattens, des vertikalen Versatzes, des Unschärfradius, des verlängerten Radius und der Farbe.

Wie erstelle ich eine CSS -Taste mit Übergang? transition transition CSS -Schaltflächen mit Übergängen können mit dem Attribut

erstellt werden. Diese Eigenschaft wird verwendet, um die Geschwindigkeit zu steuern, mit der der Benutzer von einem Stil zum anderen ändert, wenn er über eine Schaltfläche schwebt oder auf eine Schaltfläche klickt. Attribute nehmen mehrere Werte an, einschließlich des zu konvertierenden Attributs, der Dauer der Umwandlung, der Zeitverzögerung und der Verzögerung.

Wie erstelle ich CSS -Schaltflächen mit Animationen?

CSS -Schaltflächen mit Animationen können mit animation Eigenschaften und keyframes -Regeln erstellt werden. Das Attribut animation wird verwendet, um den Namen, die Dauer, die Zeitfunktion, die Verzögerung, die Anzahl der Iterationen, die Richtung, den Füllmodus und den Wiedergabestatus der Animation anzugeben. Die keyframes -Regel wird verwendet, um Stile für jede Phase der Animation anzugeben.

Wie erstellt ich reaktionsschnelle CSS -Tasten?

Responsive CSS -Schaltflächen können mit Medienabfragen erstellt werden. Medienabfragen werden verwendet, um verschiedene Stile für verschiedene Geräte oder Bildschirmgrößen anzuwenden. Sie können beispielsweise eine Medienabfrage definieren, die die Größe von Schaltflächen der Größe, Füllung und Schriftart für Bildschirme mit Breiten von weniger als 600 Pixel ändert.

Wie erstelle ich CSS -Schaltflächen mit unterschiedlichen Formen?

CSS -Schaltflächen mit unterschiedlichen Formen können mit den border-radius -attributen und transform -attributen erstellt werden. Die border-radius Eigenschaft kann verwendet werden, um kreisförmige oder ovale Tasten zu erstellen. Mit der Eigenschaft transform kann es verwendet werden, um zu drehen, zu zoomen, zu neigen oder zu pannen.

Das obige ist der detaillierte Inhalt vonEine Einführung in die Grundlagen moderner CSS -Tasten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!