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 /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-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 /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-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 /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-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!