Eine Schaltfläche ist eines der Elemente, die auf Webseiten am häufigsten verwendet werden. Das Tag <button></button>kann verwendet werden, um einen Prozess wie die Datenausgabe zu starten, ein modales Fenster zu öffnen, ein Formular zu senden usw. In dem Material, dessen Übersetzung wir veröffentlichen, werden wir über die Feinheiten des Stils des Elements buttonund darüber sprechen, wie die Schaltflächen so gestaltet werden, dass sie in jedem Browser gut funktionieren. Darüber hinaus werden hier die am häufigsten verwendeten Schaltflächenstile behandelt. Wir werden hier über einige der Schwierigkeiten sprechen, die beim Arbeiten mit Tasten auftreten.
Stile, die auf Standardschaltflächen angewendet werden
Vielleicht scheint es jemandem eine Diskussion über einige elementare Dinge zu sein, über „Standardstile“ zu sprechen, aber tatsächlich ist es ziemlich interessant, darüber zu sprechen. Hier ist das Standard-Stylesheet für Schaltflächen des Google Chrome-Nutzeragenten..c-button {
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: button;
border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
border-style: solid;
border-width: 1px;
padding: 1px 7px 2px;
text-rendering: auto;
color: initial;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
Und so sieht eine Standardschaltfläche aus, deren Ausgabe die Standardstile nicht ändert.Eine einfache Schaltfläche, auf die Standardstile angewendet werden.Definieren Sie zunächst die Eigenschaft neuappearance. Es wird für das Styling einer bestimmten Plattform verwendet. Das Erscheinungsbild der Schaltfläche bei diesem Ansatz basiert auf den im Betriebssystem des Benutzers verwendeten Stilen..c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
appearanceSehen Sie sich nach dem Zurücksetzen der Eigenschaft an, wie die Schaltflächen in verschiedenen Browsern aussehen.Die Darstellungseigenschaft dieser Schaltflächen ist auf "Keine" gesetzt.Bevor wir mit dem Styling fortfahren, müssen wir einige weitere Eigenschaften zurücksetzen. Diese -border,border-radius,background..c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
background: #ccc;
}
Schaltfläche nach dem Zurücksetzen der Eigenschaften Nachdem wir die Standardschaltflächenstile zurückgesetzt haben, ist es Zeit, fortzufahren. Ich möchte nämlich darüber sprechen, wie Schaltflächen basierend auf den Anforderungen für ihr Design gestaltet werden.Styling normaler Tasten
Beginnen wir mit einem einfachen Beispiel, in dem es darum geht, normale Schaltflächen zu gestalten, die nur Text anzeigen. Die folgende Abbildung zeigt die „Anatomie“ einer normalen Schaltfläche.Textfarbe (Textfarbe), Schriftgröße (Schriftgröße), Hintergrund (Hintergrund), abgerundete Ecken (Rundheit), Einzug (Polsterung).c-button {
appearance: none;
border: 0;
border-radius: 5px;
background: #4676D7;
color: #fff;
padding: 8px 16px;
font-size: 16px;
}
Mit dem obigen CSS-Code können wir eine Schaltfläche erhalten, die der in der vorherigen Abbildung gezeigten ähnlich ist. Nachdem der Grundstil der Schaltfläche festgelegt wurde, müssen Sie sich um das Erscheinungsbild der Schaltfläche in verschiedenen Zuständen kümmern.Normaler Zustand der Taste (Normal), Fokussieren (Fokus), Bewegen der Maus über die Taste (Hover), Deaktivieren der Taste (Deaktiviert)▍Stile, die auf Schaltflächen angewendet werden, wenn Sie mit der Maus darüber fahren und wenn sie scharfgestellt werden
Um dem Benutzer anzuzeigen, dass sich der Mauszeiger über der Schaltfläche befindet, ist es wichtig, die Schaltfläche mit einem für dieses Ereignis entwickelten Stil auszustatten. Gleiches gilt für das Ändern des Erscheinungsbilds einer Schaltfläche, wenn sie in einer Situation, in der ein Benutzer, der eine Tastatur verwendet, mit einer Seite arbeitet, den Fokus erhält.Dieses Material weist darauf hin, dass es wichtig ist, Stile hinzuzufügen, die auf die Schaltfläche angewendet werden, wenn Sie mit der Maus darüber fahren ( hover) und wenn sie den Fokus erhält ( focus).Wenn ein Stil hovervor einem Stil hinzugefügt wird focus, funktionieren alle Stile ordnungsgemäß. Das Problem tritt auf, wenn der Stil focusvor dem Stil hinzugefügt wird hover. Wenn ein Element mit der Maus angeklickt wird, focusmanifestiert sich der Stil in keiner Weise, sondern nur die durch den Stil bestimmte Schaltflächendarstellung ist sichtbar hover.Nun, wenn zuerst der Schwebestil und dann der Fokusstil kommen,sieht die richtige Stilbeschreibung folgendermaßen aus:.c-button:hover {
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}
▍ Minimale Tastenbreite
Damit die Schaltfläche gut aussieht, muss sie eine bestimmte Breite haben. Es ist wichtig, im Voraus darüber nachzudenken und die langen und kurzen Beschriftungen zu berücksichtigen, die möglicherweise auf den Schaltflächen angezeigt werden. Aufgrund der Eigenschaft können min-widthSie die Mindestbreite der Schaltfläche festlegen. Hier ist mein Artikel, in dem diese und andere ähnliche Eigenschaften ausführlich besprochen werden.Schauen Sie sich die folgende Abbildung an. Dort sehen Sie mehrere Schaltflächen mit unterschiedlich langen Beschriftungen in Englisch und Arabisch. Wenn Sie die Mindestbreite der Schaltfläche nicht festlegen, ist die Schaltfläche zu kurz, wenn die Beschriftung kurz ist. Es ist besser, dies nicht zuzulassen und die Eigenschaft zu nutzen min-width.Es lohnt sich, die Eigenschaft der Schaltfläche mit der minimalen Breite festzulegen.c-button {
min-width: 100px;
}
▍ Einzug
Eine Idee kann attraktiv aussehen, bei der Schaltflächen keine horizontale Einrückung zugewiesen wird. Immerhin haben die Schaltflächen eine bestimmte Breite, was bedeutet, dass zwischen den Kanten der Schaltflächen und den darauf enthaltenen Beschriftungen genügend Platz ist. Damit? Nein, nicht so. Die Umsetzung dieser Idee kann negative Folgen haben, wenn sich die Beschriftung auf der Schaltfläche ändert.Schauen Sie sich die folgende Abbildung an.Es wird empfohlen, den Schaltflächen interneEinrückungen zuzuweisen. Beachten Sie, dass die darauf befindliche Beschriftung sehr nahe an den Rändern liegen kann, wenn die Einrückung nicht der Schaltfläche zugewiesen ist. Auch wenn die Schaltfläche eine Eigenschaft hatmin-width. Am unteren Rand des Bildes werden sowohl die Eigenschaftpaddingals auch die Eigenschaft verwendetmin-width. Dies gibt mehr Sicherheit, dass die Schaltfläche in einer Situation gut aussieht, in der die Länge der darauf angezeigten Inschrift nicht im Voraus bekannt ist.▍Font-Familie für Beschriftungen auf Schaltflächen
Formularelemente erben standardmäßig nicht die Schriftfamilie, die <html>oder zugewiesen ist <body>. Es ist interessant festzustellen, dass ich 70% dieses Artikels geschrieben habe und festgestellt habe, dass ich erstens die Schriftart der zu Demonstrationszwecken verwendeten Schaltfläche nicht geändert habe und zweitens nichts darüber geschrieben habe.Um dieses Problem zu lösen, font-familymuss die Eigenschaft auf gesetzt werden inherit..c-button {
font-family: inherit;
}
▍ Styling deaktivierter Tasten
Um dem Benutzer anzuzeigen, dass die Schaltfläche deaktiviert ist, können Sie ihr ein Attribut hinzufügen disabledund die Schaltfläche mithilfe von CSS formatieren.Hier ist der HTML-Code, der die deaktivierte Schaltfläche beschreibt:<button disabled></button>
Hier ist der CSS-Code zum Stylen einer solchen Schaltfläche:.c-button[disabled] {
color: #d2d5db;
background: #6c7589;
cursor: not-allowed;
}
Wenn die Schaltfläche deaktiviert ist, kann sie nicht über die Tastatur fokussiert werden und wird aus dem Eingabehilfenbaum der Seitenelemente entfernt.▍Externe Ansicht des Mauszeigers, wenn Sie den Mauszeiger über die Schaltfläche bewegen
Der Standard-Mauszeiger über der Schaltfläche sieht aus wie ein Pfeil. Diese Antwort auf StackOverflow gefällt mir : „Schaltflächen sind ein traditionelles Desktop-Steuerelement. Dies ist eine Umgebung, in der ein Handzeiger bis zum Aufkommen des Internet-Zeitalters nie verwendet wurde. Als das gleiche Steuerelement auf Webseiten verwendet wurde, haben die Entwickler einfach versucht, die Schaltflächen so zu gestalten, wie sie in Desktop-Anwendungen aussehen. “Um das übliche Verhalten des Zeigers zu überschreiben, wird empfohlen, den Standard-Cursorpfeil in einen handförmigen Cursor zu ändern.Standardpfeilcursor und verbesserter Handcursor.Nachdem wir die grundlegenden Probleme des Schaltflächenstils besprochen haben, finden Sie hier den vollständigen CSS-Code, der alles enthält, was wir oben angesprochen haben:.c-button {
min-width: 100px;
font-family: inherit;
appearance: none;
border: 0;
border-radius: 5px;
background: #4676d7;
color: #fff;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
.c-button:hover {
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}
In den folgenden Abschnitten werden die verschiedenen Stile und Arten von Schaltflächen erläutert, die Sie in Ihren Projekten verwenden können.Symbolschaltflächen
Manchmal benötigen Sie eine Schaltfläche, um ein bestimmtes Symbol zu haben. Dies kann erforderlich sein, um die Schaltfläche hervorzuheben oder den Benutzer besser über die Rolle der Schaltfläche zu informieren. Es ist wichtig, dass Benutzer mit Behinderungen auf die Symbolschaltflächen zugreifen können.Beispiele fürSymbolschaltflächen Im vorherigen Bild gibt es Symbolschaltflächen. Der folgende Code zeigt das dem Symbol hinzugefügte Attributaria-hidden, mit dem Sie es aus dem Eingabehilfenbaum entfernen können. Ich habe auch ein Attribut hinzugefügtfocusable="false", um zu verhindern, dass das Symbol im IE den Fokus erhält.Bitte beachten Sie, dass ich den Stil verwendet habevertical-align: middle, um den Inhalt von Symbolen und Schaltflächen vertikal auszurichten.Hier ist der HTML-Code für die betreffende Schaltfläche:<button class="c-button">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
Add to fav
</button>
Hier ist der Style-Code:.c-button svg {
display: inline-block;
vertical-align: middle;
fill: #fff;
width: 20px;
height: 20px;
margin-right: 0.25rem;
}
Was wir gerade untersucht haben, kann funktionieren, bis wir uns entscheiden, den Text der Schaltfläche auszublenden und ihn zur Schaltfläche zu machen, auf der sich nur das Symbol befindet. Wie kann man das machen? Zuerst müssen Sie den Text beispielsweise in ein Element einschließen span. Dann können Sie das Erscheinungsbild der Schaltfläche weiter verbessern. Hier ist die HTML-Beschreibung der Schaltfläche:<button class="c-button c-button--icon">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
<span>Add to fav</span>
</button>
Es scheint, dass es jetzt ausreicht, nur das Element zu verbergen, spanund die Arbeit wird erledigt:.c-button--icon span {
display: none;
}
Obwohl bei diesem Ansatz der Text verschwindet und das Symbol erhalten bleibt, ist dies in Bezug auf die Zugänglichkeit von Inhalten sehr schlecht. Die Schaltfläche ist für Bildschirmleser nicht mehr „sichtbar“. Beispielsweise meldet VoiceOver unter macOS, dass eine solche Schaltfläche einfach eine „Schaltfläche“ ist, ohne dass Details dazu vorliegen. Es gibt verschiedene Lösungen für dieses Problem.▍Verwenden von SVG-Symbolen
Ich bevorzuge SVG-Symbole. Es wird empfohlen, alle SVG-Beschreibungen von Grafikelementen in einer Datei zu sammeln und jedes Symbol <svg>mithilfe des Elements in das Tag aufzunehmen <use>. Hier ist ein Beispiel:<svg class="c-icon" width="32" height="32" viewBox="0 0 20 20">
<use xlink:href="icons.svg#facebook"></use>
</svg>
Hier ist der Code für das SVG-Symbol, dessen Beschreibung in einer Datei gespeichert ist icons.svgund eine Kennung hat #facebook. Dieser Ansatz reduziert die Codeduplizierung.▍Größenschaltfläche mit Symbol
Da der Schaltflächentext nicht mehr sichtbar ist und die CSS-Eigenschaft für die Schaltfläche festgelegt ist min-width, entspricht die Breite der Schaltfläche nicht der Größe des Symbols. Um diese Funktion zu berücksichtigen, ist es besser, die Breite der Symbolschaltfläche explizit festzulegen.Eine Schaltfläche, für die die CSS-Eigenschaft min-width festgelegt ist, und eine Schaltfläche, für die diese Eigenschaft nicht festgelegt ist.c-button--icon {
min-width: initial;
text-align: center;
padding: 10px 14px;
}
▍Visuelles Ausblenden von Text
Ein Element, das die beliebte Klasse verwendet .sr-only, kann visuell ausgeblendet werden, indem es vom Bildschirm entfernt wird, aber für Bildschirmleser zugänglich bleibt.Hier ist der HTML-Code:<button class="c-button c-button--icon">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
<span class="sr-only">Add to fav</span>
</button>
Hier sind die Stile:.sr-only {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
▍ Stellen Sie die Schriftgröße auf 0 ein
Wenn Sie die Eigenschaft font-sizeauf einen Wert festlegen 0, belegt das Element überhaupt spankeinen Bildschirmbereich. Das heißt, es wird versteckt..c-button--icon span {
font-size: 0;
}
Aber hier neige ich zu einer Lösung, bei der eine Klasse verwendet wird .sr-only. Aus meiner Sicht sieht es logischer aus. Die Methode, Text durch Setzen der Schriftgröße auf 0 auszublenden, scheint mir eine Art Hack zu sein.▍Verwendung des Aria-Label-Attributs
Wenn die Schaltfläche kein Element enthält <span>, muss es eine Möglichkeit geben, darauf zu verzichten. Eine solche Möglichkeit besteht darin, ein Attribut zu verwenden aria-label. Das Attribut wird entweder dem Element selbst <button>oder dem Element zugewiesen <svg>.<button class="c-button c-button--icon" aria-label="Add to fav">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
</button>
Wenn Sie mehr über die Schaltflächen mit Symbolen erfahren möchten, schauen Sie sich dieses Material an.Schaltflächen mit mehreren Textzeilen
In einigen Fällen kann es erforderlich sein, dass die Schaltfläche zwei Textzeilen enthält. Ein Beispiel für eine solche Schaltfläche ist unten dargestellt.Schaltfläche mit zwei Textzeilen Hier ist eine Schaltfläche für ein Anmeldeformular, das den Haupt- und Hilfstext enthält. Wie kann man einen solchen Knopf machen und gleichzeitig die Zugänglichkeit für Menschen mit Behinderungen nicht vergessen? Hier ist der relevante HTML:<button class="c-button">
<span>Subscribe to our newsletter</span>
<span>240K+ subscribers</span>
</button>
Der Bildschirmleser "spricht" diese Schaltfläche als "Abonnieren Sie unseren Newsletter 240K + Abonnenten". Wenn der Benutzer dies hört, kann dies ihn verwirren, da die beiden auf der Schaltfläche angezeigten Textzeilen durch nichts voneinander getrennt werden. Sehen Sie sich den Screenshot des Chrome-Tools an, um die Verfügbarkeit von Elementen zu überprüfen.Untersuchen der Verfügbarkeit von Elementen in ChromeUm die Benutzer nicht zu verwirren, würde ich die zweite Textzeile lieber vor Bildschirmlesern verbergen. Sie können dies tun, indem Sie das Attributaria-hiddenim entsprechenden Element verwenden<span>:<button class="c-button">
<span>Subscribe to our newsletter</span>
<span aria-hidden="true">240K+ subscribers</span>
</button>
Wenn Sie das HTML-Markup aus irgendeinem Grund nicht ändern können, gibt es eine andere Möglichkeit, der Schaltfläche zusätzlichen Text hinzuzufügen. Ich habe auf der Website des Smashing Magazine eine interessante Lösung für dieses Problem gefunden. Es besteht darin, Inhalte mit Pseudoelementen zu platzieren. Mit diesem Ansatz sehen Bildschirmleser nichts Überflüssiges. Hier ist das CSS für diese Lösung:.c-button--multiple span:after {
content: "240K+ subscribers";
display: block;
font-weight: 400;
margin-top: 0.25rem;
}
Links (<a>) oder Schaltflächen (<Button>)?
Wann werden Links verwendet und wann werden Schaltflächen verwendet? Lassen Sie uns zunächst darüber sprechen, wie sie sich voneinander unterscheiden.▍Links
Das Tag <a>ist ein Hyperlink, mit dem Sie zu einer anderen Seite der Website oder zu einem bestimmten Abschnitt der vom Benutzer angezeigten Seite wechseln können. Zusammen mit dem Tag <a>, können Sie die vier pseudo- benutzen :hover, :focus, :activeund :visited. Wenn wir Links unter dem Gesichtspunkt der Barrierefreiheit betrachten, müssen wir sagen, dass Sie mit ihnen über die Taste Enterauf der Tastatur interagieren können . Die Links sind stimmhaft und Screenreader.UttTasten
Ein Element <button type="button">selbst führt keine Aktionen aus, ohne JavaScript-Code damit zu verbinden. Sie können damit Pseudoklassen verwenden :hover, :focusund :active. Wenn wir über Barrierefreiheit sprechen, können Sie mit der Taste über die Tastaturtasten Enterund interagieren .c-buttonso geschrieben werden, dass er sowohl für Elemente als auch für Elemente <button>verwendet werden kann <a>. Betrachten Sie das folgende Beispiel.Verwenden von Links und SchaltflächenBeachten Sie, dass die Schaltflächen auf der Seite auf die gleiche Weise gestaltet sind. Der erste von ihnen ist jedoch tatsächlich ein Element<a>, und der zweite ist ein Element<button>. Dies bedeutet, dass die Schaltfläche nicht unbedingt wie ein Element in HTML aussieht<button>.Es gibt zwei Ergänzungen zum Stil.c-button. Dies sind die Eigenschaftentext-decoration: none;undtext-align: center;. Standardmäßig ist der Text der Links unterstrichen, daher möchten wir dies ändern, indem wir die verwendete Klasse formatieren. Darüber hinaus ist es wichtig, dass wir den Inhalt der Schaltfläche in Fällen zentrieren, in denen ein anderes HTML-Element als zur Beschreibung der Schaltfläche verwendet wird<button>..c-button {
text-decoration: none;
text-align: center;
}
▍ Das <button> -Element muss nicht wie eine Schaltfläche aussehen
Ich mag dieses Beispiel, in dem unter Berücksichtigung der Anforderungen an die Zugänglichkeit von Inhalten das „Akkordeon“ -Panel implementiert ist. Vorausgesetzt, JavaScript ist nicht verfügbar, sieht das Markup-Rendering-Ergebnis zunächst wie das folgende aus.Seitenmaterialien,wenn JavaScript nicht verfügbar ist Hier ist der HTML-Code für ein Fragment eines solchen Markups:<div class="accordion" data-aria-accordion>
<h2 data-aria-accordion-heading>Heading of my panel</font></h2>
<div data-aria-accordion-panel>
<p>Content goes here</p>
</div>
</div>
Wenn JavaScript verfügbar ist, beschreibt das obige Markup Elemente, die reduziert und erweitert werden können. Dies wird erreicht, indem eine Schaltfläche erstellt und dem Element hinzugefügt wird <h2>.Seitenmaterialien unter Bedingungen, unter denen JavaScript-Funktionen verfügbar sindIn diesem Fall können wir sagen, dass die Verwendung des Elements<button>die richtige Wahl ist, da die Schaltfläche das Problem des Erweiterns und Reduzierens von Textblöcken löst.▍Boot-Taste
Angenommen, wir haben ein Dokument. Wir müssen einen Link beschreiben, um ihn herunterzuladen. Welches Element sollte verwendet werden, um dieses Problem zu lösen? Hier hilft uns ein Link! Wenn Sie dem Link ein Attribut hinzufügen download, wird durch Klicken darauf der Download der relevanten Materialien gestartet.Link zum Herunterladen des als Schaltfläche gestalteten DokumentsHier ist der Code für diesen Link:<a href="rtl-101.pdf" download>Download PDF</a>
Mit diesem Ansatz steht uns ein als Button stilisierter Link zur Verfügung, der seine Aufgabe nur mit semantischen HTML-Strukturen erfüllt.Strichknöpfe
Eine normale Schaltfläche, wenn Sie mit der Maus darüber fahren, wird zu einer Schaltfläche mit einem Strich.Die vorherige Abbildung zeigt eine Schaltfläche, die zu einer Schaltfläche mit einem Strich wird, wenn Sie mit der Maus darüber fahren. Welche Methode wird am besten verwendet, um eine ähnliche Änderung im Erscheinungsbild einer Schaltfläche zu implementieren? Für den Anfang sollte der Schaltflächenstil eine Eigenschaft enthaltenborder, die standardmäßig eine transparente Farbe verwendet. Durch die Bereitstellung einer solchen Eigenschaft stellen wir sicher, dass die Ränder der Schaltfläche beim Bewegen nicht neu gezeichnet werden..c-button {
border: 2px solid transparent;
}
.c-button:hover {
background: transparent;
color: #222;
border-color: #4676d7;
}
Dank dieses Ansatzes steht uns eine Schaltfläche zur Verfügung, um die beim Überfahren die Ränder angezeigt werden. In diesem Fall wird der Hintergrund der Schaltfläche transparent.Verlaufsschaltflächen
Als ich an einem Artikel über Positionierungselemente arbeitete, brauchte ich eine Schaltfläche mit einer Verlaufsfüllung.Ich brauchte etwas Ähnliches wie in der folgenden Abbildung.Verlaufstaste und ihre Variante mit einem StrichEs gibt zwei Optionen für eine Schaltfläche - eine Verlaufstaste und eine Schaltfläche mit einem Strich. Um ein solches Erscheinungsbild der Schaltfläche zu erzielen, benötigte ich die Basisschaltfläche (Verlaufsschaltfläche) mit einem transparenten Rand. Dieser Rand wird nur für eine Schaltfläche mit einem Strich angezeigt..c-button {
display: inline-block;
color: #fff;
background: linear-gradient(to bottom, #00acee, #0072e0);
font-size: 18px;
font-weight: 500;
padding: 12px 26px;
border-radius: 100px;
border: 3px solid transparent;
text-decoration: none;
}
.c-button--outline {
background: transparent;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
Hier scheint alles vernünftig zu sein, aber im Laufe der Arbeit bin ich auf ein seltsames Problem gestoßen. Ich habe sogar versucht, das Problem zu lösen, indem ich Twitter-Benutzer um Hilfe gebeten habe. Dieses Problem ist in der folgenden Abbildung dargestellt.Eine normale Schaltfläche, eine Schaltfläche mit einem Farbverlauf (der Rand ist tatsächlich transparent; er wird nur zu Farbzwecken angezeigt), eine Schaltfläche mit seltsamen KantenNachdem wir nun herausgefunden haben, wie eine Verlaufsschaltfläche mit einem transparenten Rand aussieht, möchte ich Ihnen die Gründe für die oben genannten Kuriositäten erläutern .Jedes Element verfügt über eine Eigenschaftbackground-origin, die den Positionierungsbereich des Hintergrundbilds definiert, der auf den Standardwert festgelegt istpadding-box. Bei diesem Ansatz wird die Größe des Verlaufs so ausgewählt, dass sie der Größe des Elements entspricht, wobei die Dicke des Rahmens berücksichtigt wird.Ich habe versucht, der Schaltfläche einen breiten Rand hinzuzufügen, um zu beobachten, was passiert. Beachten Sie, wie sich der Verlauf wiederholt und dass seine Größe mit der Eigenschaft derpaddingSchaltflächeübereinstimmt.Schaltfläche mit breiten Rändern und FarbverlaufUm dieses Problem zu lösen, muss der Positionierungsbereich des Hintergrundbilds mithilfe des Stils festgelegtbackground-origin: border-box;werden. Ändern Sie den Standardwertpadding-boxinborder-box:.c-button {
background-origin: border-box;
}
Wenn Sie jetzt experimentieren möchten, ein Beispiel für CodePen.Was ist besser - Höhe oder Polsterung?
Jeder Knopf hat eine Höhe. Sie können die Höhe einer Schaltfläche steuern, indem Sie entweder ihre Eigenschaft explizit festlegen heightoder eine Eigenschaft paddingfür die Ober- und Unterseite der Schaltfläche festlegen. Bitte beachten Sie, dass die Probleme, die wir unten diskutieren werden, hauptsächlich für Elemente typisch sind <a>.▍ Feste Höhe
Angenommen, wir haben einen Button, der wie folgt gestaltet ist:.c-button {
min-width: 120px;
height: 45px;
}
Bei diesem Ansatz wird der Text nicht zentriert. Es sieht alles so aus wie unten.Schaltfläche, deren Text nicht in der Mitte ausgerichtet istUm dies zu beheben und den Text auszurichten, können Sie entweder die Eigenschaftpaddingoder die Eigenschaft verwendenline-height. Indem Sieline-heighteinen Wert festlegen, der der Höhe der Schaltfläche entspricht oder dieser nahe kommt, können Sie den Text in der Mitte ausrichten..c-button {
min-width: 120px;
height: 45px;
line-height: 45px;
}
Diese Methode hat jedoch Nachteile:- Es kann nicht garantiert werden, dass der Schaltflächentext immer korrekt zentriert ist. Wenn Sie die Schriftart ändern, ist die Ausrichtung möglicherweise fehlerhaft.
- Wenn Sie den von der Eigenschaft angegebenen Wert erhöhen
font-size, müssen Sie einen neuen Wert für die Eigenschaft auswählen line-height. - Die Eigenschaft
line-height funktioniert möglicherweise anders für Texte, die in verschiedenen Sprachen angezeigt werden. Dies gilt für mehrsprachige Websites. - Wenn eine Schaltfläche mit zwei Textzeilen vorhanden ist, eignet sich diese Methode nicht zum Ausrichten des Inhalts der Schaltfläche.
▍ Vertikaler Einzug
Wenn Sie dieselben Werte für die Eigenschaften padding-topund festlegen padding-bottom, müssen Sie damit rechnen, dass der Inhalt der Schaltfläche zentriert wird. Wie es ist? In der Tat hängt es von der spezifischen Situation ab.Es gibt Schriftarten, die sich sehr gut zentrieren lassen. Und es gibt diejenigen, die sich anders verhalten. Manchmal muss einer der Werte der vertikalen Einrückung leicht geändert werden, um das Ziel zu erreichen. Schauen Sie sich den nächsten Button an.Versuch, Schaltflächentext zu zentrierenHier ist der CSS-Code zum Stylen dieser Schaltfläche:.c-button {
min-width: 120px;
padding: 16px 14px;
}
In diesem Fall wirkt der Inhalt der Schaltfläche leicht voreingenommen. Der Wert des oberen Einzugs sollte leicht reduziert werden:.c-button {
min-width: 120px;
padding: 14px 14px 16px 14px;
}
Umschließen von Schaltflächeninhalten in ein <span> -Tag
Während der Experimente stellte ich fest, dass die Ausrichtung des Texts der Adobe-Schaltflächen etwas beeinträchtigt ist. So sieht es aus.Zentrieren etwas umgeworfen.Ich untersuchte diese Tasten und bemerkte ein interessantes Muster. Der Inhalt wird in ein Element eingeschlossen<span>, das eine feste Höhe für die Schaltfläche angibt.<button class="c-button-adobe">
<span>Save Changes</span>
</button>
Bei einem <button>Element <span>ist das Element standardmäßig zentriert. Wenn sich die Höhe ändert, wird der Inhalt automatisch zentriert, ohne dass eine Eigenschaft paddingoder etwas anderes erforderlich ist . Hier ist eine animierte Demonstration dieses Verhaltens.Ändern der Höhe einer Schaltfläche und automatisches Zentrieren ihres InhaltsRichtig, wenn es sich um einen Link handelt, der wie eine Schaltfläche aussieht, muss das Element<span>zentriert werden. Um diese Funktion zu berücksichtigen, kann die Methode zum Anordnen von Elementen verwendet werdenflexbox..c-button {
display: inline-flex; *To keep the button inline, and flex container at the same time*
align-items: center;
justify-content: center;
}
Das ist alles. Ich möchte darauf hinweisen, dass dieser Artikel mir beim Schreiben dieses Abschnitts geholfen hat .Knöpfe in Flexbox- oder Gitterbehältern
Hier haben Sie möglicherweise eine Frage dazu, was Schaltflächen mit Flex- und Rasterlayouts zu tun haben. Lassen Sie mich diese Frage klären.Ich habe an einem Abschnitt eines Projekts gearbeitet. Ich musste den Inhalt vertikal zentrieren. Also habe ich das Flex-Layout verwendet:.c-hero {
display: flex;
flex-direction: column;
justify-content: center;
}
Was ich getan habe, war ein bisschen überraschend.Ergebnis der Verwendung des Flex-LayoutsStandardmäßig wird jedes Flex-Element innerhalb der Breite des übergeordneten Elements gestreckt. Genau dies ist mit der in der vorherigen Abbildung gezeigten Schaltfläche geschehen. Um dieses Problem zu vermeiden, müssen Sie die Eigenschaft konfigurierenalign-self:.c-button {
align-self: flex-start;
}
So sieht die Schaltfläche danach aus.Die Schaltfläche sieht viel besser aus.Ein weiteres häufiges Problem tritt auf, wenn die Schaltfläche in einem Flex-Container platziert wird, in dem standardmäßig die Eigenschaft festgelegt istflex-direction: row. Die Höhe der Schaltfläche wird an die Höhe des übergeordneten Elements angepasst. Um dieses Problem zu beheben, müssen Sie diealign-selfEigenschaftbuttonoder die Eigenschaft flex container verwendenalign-items.In der Höhe gestreckter KnopfHier ist das CSS:.c-button {
align-self: center;
}
Durch Einstellen der Ausrichtung der Schaltfläche relativ zur Mitte des Containers lösen wir das Problem. So wird nun dasselbe Beispiel aussehen.Lösung des Problems eines gedehnten KnopfesEm Einheiten verwenden
Mit der Maßeinheit emkönnen die Tastengrößen richtig konfiguriert werden. Diese Maßeinheit ist in einer solchen Situation sehr nützlich. Die Einheit emist gleich dem font-sizeElement ( pxoder rem). Schauen Sie sich das folgende Beispiel an:.element {
font-size: 16px;
padding: 0.5em;
}
In diesem Fall ist der Wert der Auffüllung gleich 16 * 0.5 px.Angenommen, das Projekt verwendet Schaltflächen in drei Größen: normal, mittel und groß. Wenn die Werte angeben padding, width, height, marginverwendeten Maßeinheiten emermöglicht es Ihnen , eine Schaltfläche zu erstellen, von denen die Abmessungen sehr leicht zu ändern ist. So sieht es aus.Schaltflächen unterschiedlicher GrößeHier sind jedoch die Fragmente des CSS-Codes, die die Maßeinheit verwendenem:.c-button {
font-size: 1rem;
min-width: 6.25em;
border-radius: 0.3125em;
padding: 0.625em 1em;
}
.c-button svg {
width: 1.25em;
height: 1.25em;
margin-right: 0.25em;
}
Für Schaltflächen unterschiedlichen Typs müssen Sie Klassen erstellen, die unterschiedliche Schriftgrößen angeben:.c-button--md {
font-size: 22px;
}
.c-button--lg {
font-size: 30px;
}
→ Hier ist ein Beispiel für die Verwendung ähnlicher Schaltflächen in CodePen→ Hier ist mein Artikel zu diesem Thema. Ich empfehle Ihnen, es zu lesenAnimation und Übergänge
Um es dem Benutzer angenehmer zu machen, mit der Seite zu arbeiten, ist es wichtig, über einen Übergang nachzudenken, wenn Sie mit der Maus über die Schaltfläche fahren. Der einfachste Weg, dies zu tun, besteht darin, eine Änderung der Hintergrundfarbe zu organisieren. Hier ist ein Beispiel für CodePen, in dem Sie die Umsetzung dieser Idee sehen können.Zusammenfassung
Ich habe mich sehr gefreut, an diesem Material zu arbeiten. Ich habe mehr als ein Jahr gebraucht, um es zu schreiben. Ich bin froh, dass es endlich veröffentlicht wird. Ich hoffe, Sie finden hier etwas, das Ihnen nützlich ist.Liebe Leser! Kennen Sie nützliche Möglichkeiten, mit Schaltflächen zu arbeiten, die den Rahmen dieses Artikels sprengen?