Grundlegende Informationen zum Erstellen farbadaptiver, responsiver und barrierefreier <button>
-Komponenten.
In diesem Beitrag möchte ich meine Gedanken
zur Entwicklung eines farbadaptiven,
responsives und barrierefreies <button>
-Element.
Testen Sie die Demo und sehen Sie sich die
Quelle
Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Die
<button>
-Element für die Nutzerinteraktion entwickelt. Das click
-Ereignis wird über die Tastatur ausgelöst,
Maus, Touchscreen, Stimme und mehr anpassen – dank intelligenter Regeln
Außerdem gibt es
mit Standardstile in jedem Browser, sodass Sie sie direkt verwenden können,
Anpassungen vornehmen. Zum Aktivieren color-scheme
verwenden
in die browserseitig bereitgestellten hellen und
dunklen Schaltflächen integrieren.
Es gibt auch verschiedene Arten von
Schaltflächen,
die jeweils in der vorherigen Codepen-Einbettung zu sehen sind. Ein <button>
ohne Typ
ändern, sodass sie sich in einem <form>
befinden, und ändern in den Typ „Senden“.
<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>
<!-- button state -->
<button disabled></button>
<!-- input buttons -->
<input type="button" />
<input type="file">
Bei der GUI Challenge des Monats Jede Schaltfläche erhält Stile, mit denen sich ihre Absichten visuell unterscheiden lassen. Zurücksetzen Schaltflächen werden Warnfarben angezeigt, da sie zerstörerisch sind. Senden Sie Schaltflächen erhalten einen blauen Akzenttext, sodass sie etwas stärker beworben werden als normal. Schaltflächen.
<ph type="x-smartling-placeholder">Schaltflächen haben auch Pseudoklassen.
für die CSS-Stile festlegen. Diese Klassen bieten CSS-Hooks zum Anpassen der
Gefühl der Taste: :hover
wenn sich eine Maus über der Schaltfläche befindet,
:active
bei Verwendung der Maus
oder die Tastatur drücken, und
:focus
oder
:focus-visible
.
für die Unterstützung beim Gestalten assistiver Technologien.
button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
Markup
Zusätzlich zu den Schaltflächentypen, die in der HTML-Spezifikation bereitgestellt werden, habe ich eine
Schaltfläche mit einem Symbol und einer Schaltfläche mit der benutzerdefinierten Klasse btn-custom
.
<button>Default</button>
<input type="button" value="<input>"/>
<button>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="..." />
</svg>
Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">
Zu Testzwecken wird jede Schaltfläche in einem Formular platziert. So kann ich sicherstellen, Stile werden entsprechend für die Standardschaltfläche aktualisiert, die sich wie eine Schaltfläche „Senden“. Außerdem ändere ich die Symbolstrategie von Inline-SVG in ein maskiertes SVG. damit beide gleichermaßen gut funktionieren.
<form>
<button>Default</button>
<input type="button" value="<input>"/>
<button>Icon <span data-icon="cloud"></span></button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom btn-large" type="button">Large Custom</button>
<input type="file">
</form>
Die Matrix der Kombinationen ist an diesem Punkt ziemlich überwältigend. Zwischen Schaltfläche und Pseudoklassen zu zitieren oder sich in eine bestimmte Form zu bringen, gibt es über 20 Schaltflächen-Kombinationen. Es ist gut, dass CSS uns dabei helfen kann, klar!
Bedienungshilfen
Schaltflächenelemente sind natürlich zugänglich, es gibt jedoch ein paar gängige Verbesserungen.
Zusammen bewegen und fokussieren
Ich gruppiere :hover
und :focus
gern mit der Funktion „:is()
“
Pseudo-Selektor. Dadurch wird sichergestellt, dass auf meinen Oberflächen immer die Tastatur berücksichtigt wird.
und assistiven Technologien.
button:is(:hover, :focus) {
…
}
Interaktiver Fokusring
Ich animiert den Fokusring für Nutzer von Tastaturen und Hilfstechnologien gern. Ich indem Sie den Umriss um 5 Pixel weg von der Schaltfläche animieren, aber nur wenn die Schaltfläche nicht aktiv ist. Dadurch entsteht ein Effekt, bei dem der Fokusring auf die Größe der Schaltfläche zurücksetzen.
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Sicherstellen, dass der Farbkontrast übergeben wird
Es gibt mindestens vier verschiedene Farbkombinationen, muss auf den Farbkontrast achten: Schaltfläche, Schaltfläche zum Senden, Schaltfläche zum Zurücksetzen und deaktivierte Schaltfläche. VisBug wird hier verwendet, um alle ihre Punktzahlen auf einmal prüfen und anzeigen:
Symbole für Personen ausblenden, die nicht sehen können
Beim Erstellen einer Symbolschaltfläche sollte das Symbol die Schaltflächentext. Das bedeutet auch, dass das Symbol für Personen mit Sehbehinderung nicht nützlich ist. Verlust. Glücklicherweise bietet der Browser die Möglichkeit, Elemente vor dem Screenreader auszublenden. Technologie, mit der Menschen mit Sehverlust nicht über eine dekorative Taste gestört werden. Bilder:
<button>
<svg … aria-hidden="true">...</svg>
Icon Button
</button>
Stile
Im nächsten Abschnitt etabliere ich zuerst ein System für benutzerdefinierte Eigenschaften zur Verwaltung die adaptiven Stile der Schaltfläche. Mit diesen benutzerdefinierten Eigenschaften kann ich Elemente auswählen und ihr Aussehen anpassen.
Eine adaptive Strategie für benutzerdefinierte Eigenschaften
Die Strategie für benutzerdefinierte Eigenschaften, die in dieser GUI-Challenge verwendet wird, ist der folgenden sehr ähnlich: die zum Erstellen eines Farbschemas verwendet werden. Für adaptives helles und dunkles Farbsystem, ist eine benutzerdefinierte Eigenschaft für jedes Design definiert und benannt wurde. Dann wird eine einzelne benutzerdefinierte Eigenschaft verwendet, Aktueller Wert des Designs und ist einer CSS-Eigenschaft zugewiesen. Später erschien die Single kann auf einen anderen Wert aktualisiert werden. Dann wird die Schaltfläche .
button {
--_bg-light: white;
--_bg-dark: black;
--_bg: var(--_bg-light);
background-color: var(--_bg);
}
@media (prefers-color-scheme: dark) {
button {
--_bg: var(--_bg-dark);
}
}
Mir gefällt, dass das helle und das dunkle Design deklarativ und klar sind. Die
werden Indirektion und Abstraktion in das benutzerdefinierte Attribut --_bg
übertragen,
Das ist jetzt die einzige „reaktive“ Property; --_bg-light
und --_bg-dark
sind
statisch sind. Es ist auch klar zu lesen, dass das helle Design das Standarddesign ist und
„dunkel“ wird nur bedingt angewendet.
Auf Einheitlichkeit des Designs vorbereiten
Die freigegebene Auswahl
Der folgende Selektor wird für die Ausrichtung aller verschiedenen Schaltflächentypen verwendet.
anfangs etwas überwältigend. :where()
ist
Die Schaltfläche muss also nicht genauer angepasst werden. Schaltflächen werden oft
an alternative Szenarien angepasst. Der :where()
-Selektor sorgt dafür,
ist einfach. In :where()
ist jeder Schaltflächentyp ausgewählt, einschließlich der
::file-selector-button
, was nicht zulässig ist
belegt
innerhalb von :is()
oder :where()
.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
…
}
Alle benutzerdefinierten Eigenschaften werden in diesem Selektor erfasst. Zeit für die Überprüfung benutzerdefinierten Eigenschaften. Hier werden einige benutzerdefinierte Eigenschaften Schaltfläche. Ich erläutere die einzelnen Gruppen Bewegungskontexte am Ende des Abschnitts.
Akzentfarbe der Schaltfläche
Schaltflächen und Symbole zum Einreichen eignen sich hervorragend für farbige Akzente:
--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);
Schriftfarbe für Schaltfläche
Schaltflächentexte sind nicht weiß oder schwarz, sondern abgedunkelt oder aufgehellt.
von --_accent
verwenden
hsl()
und
sich an den Farbton 210
halten:
--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);
Hintergrundfarbe der Schaltfläche
Schaltflächenhintergründe folgen demselben hsl()
-Muster, mit Ausnahme des hellen Designs.
auf Weiß eingestellt, sodass sie auf ihrer Oberfläche nahe an der
oder vor anderen Oberflächen:
--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);
Schaltflächenhintergrund
Mit dieser Hintergrundfarbe lässt sich eine Oberfläche hinter anderen Oberflächen erscheinen. nützlich für den Hintergrund der Dateieingabe:
--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);
Schaltflächenabstand
Der Abstand um den Text in der Schaltfläche erfolgt mithilfe der
ch
Einheit, eine relative Länge zur Schriftgröße. Dies wird kritisch, wenn große
können mit den Tasten einfach font-size
nach oben bewegt werden
Proportional:
--_padding-inline: 1.75ch;
--_padding-block: .75ch;
Schaltflächenrahmen
Der Rahmenradius der Schaltfläche wird in einer benutzerdefinierten Eigenschaft versteckt, damit die Dateieingabe wie die anderen Schaltflächen. Die Rahmenfarben richten sich nach den gängigen adaptiven Farben. System:
--_border-radius: .5ch;
--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);
Hervorhebungseffekt für Schaltfläche, wenn der Mauszeiger darauf bewegt wird
Diese Eigenschaften legen eine Größeneigenschaft für den Übergang bei einer Interaktion fest.
folgt die Hervorhebungsfarbe dem adaptiven Farbsystem. Wir werden uns ansehen, wie diese
später in diesem Beitrag interagieren, aber letztlich für box-shadow
verwendet werden.
Effekt:
--_highlight-size: 0;
--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);
Schatten für Schaltflächentext
Jede Schaltfläche hat einen subtilen Textschattenstil. So bleibt der Text über dem Schaltfläche, um die Lesbarkeit zu verbessern und die Präsentation ansprechender zu gestalten.
--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);
Buttersymbol
Symbole haben die Größe von zwei Zeichen aufgrund der relativen Längeneinheit ch
Dadurch wird das Symbol proportional zum Schaltflächentext skaliert. Die
Symbolfarbe orientiert sich am --_accent-color
für eine adaptive und an das Design angepasste
Farbe.
--_icon-size: 2ch;
--_icon-color: var(--_accent);
Schaltflächenschatten
Damit sich Schatten richtig an Licht und Dunkel anpassen, müssen beide ihre Farbe und Deckkraft. Schatten im hellen Design eignen sich am besten, wenn sie subtil und gefärbt sind. zur Oberflächenfarbe, die sie überlagern. Die Schatten im dunklen Design müssen dunkler gesättigter, sodass sie dunklere Oberflächenfarben überlagern können.
--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);
--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);
Mit adaptiven Farben und Stärken kann ich zwei Tiefen von Schatten erzeugen:
--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
--_shadow-2:
0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
Um den Schaltflächen ein leicht dreidimensionales Erscheinungsbild zu geben, wird ein 1px
-Feldschatten
erzeugt die Illusion:
--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);
Schaltflächenübergänge
Nach dem Muster für adaptive Farben erstelle ich zwei statische Eigenschaften, die Designsystemoptionen:
--_transition-motion-reduce: ;
--_transition-motion-ok:
box-shadow 145ms ease,
outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);
Alle Properties zusammen in der Auswahl
:where( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ), :where(input[type="file"])::file-selector-button { --_accent-light: hsl(210 100% 40%); --_accent-dark: hsl(210 50% 70%); --_accent: var(--_accent-light);--_text-light: hsl(210 10% 30%); --_text-dark: hsl(210 5% 95%); --_text: var(--_text-light);
--_bg-light: hsl(0 0% 100%); --_bg-dark: hsl(210 9% 31%); --_bg: var(--_bg-light);
--_input-well-light: hsl(210 16% 87%); --_input-well-dark: hsl(204 10% 10%); --_input-well: var(--_input-well-light);
--_padding-inline: 1.75ch; --_padding-block: .75ch;
--_border-radius: .5ch; --_border-light: hsl(210 14% 89%); --_border-dark: var(--_bg-dark); --_border: var(--_border-light);
--_highlight-size: 0; --_highlight-light: hsl(210 10% 71% / 25%); --_highlight-dark: hsl(210 10% 5% / 25%); --_highlight: var(--_highlight-light);
--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%); --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%); --_ink-shadow: var(--_ink-shadow-light);
--_icon-size: 2ch; --_icon-color-light: var(--_accent-light); --_icon-color-dark: var(--_accent-dark); --_icon-color: var(--accent, var(--_icon-color-light));
--_shadow-color-light: 220 3% 15%; --_shadow-color-dark: 220 40% 2%; --_shadow-color: var(--_shadow-color-light); --_shadow-strength-light: 1%; --_shadow-strength-dark: 25%; --_shadow-strength: var(--_shadow-strength-light); --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%)); --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%)) ;
--_shadow-depth-light: hsl(210 14% 89%); --_shadow-depth-dark: var(--_bg-dark); --_shadow-depth: var(--_shadow-depth-light);
--_transition-motion-reduce: ; --_transition-motion-ok: box-shadow 145ms ease, outline-offset 145ms ease ; --_transition: var(--_transition-motion-reduce); }
Anpassungen für das dunkle Design
Der Wert des Musters für statische Attribute -light
und -dark
wird deutlich, wenn
sind die Einstellungen für das dunkle Design wie folgt festgelegt:
@media (prefers-color-scheme: dark) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_bg: var(--_bg-dark);
--_text: var(--_text-dark);
--_border: var(--_border-dark);
--_accent: var(--_accent-dark);
--_highlight: var(--_highlight-dark);
--_input-well: var(--_input-well-dark);
--_ink-shadow: var(--_ink-shadow-dark);
--_shadow-depth: var(--_shadow-depth-dark);
--_shadow-color: var(--_shadow-color-dark);
--_shadow-strength: var(--_shadow-strength-dark);
}
}
Dies ist nicht nur gut lesbar, sondern Nutzer dieser benutzerdefinierten Schaltflächen können auch die mit der Gewissheit, dass sie sich an die Vorlieben der Nutzenden anpassen.
Reduzierte Bewegungsanpassung
Wenn der Besuch dieses Besuchers bei einer Bewegung akzeptabel ist, weisen Sie diesem Nutzer --_transition
zu:
var(--_transition-motion-ok)
:
@media (prefers-reduced-motion: no-preference) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_transition: var(--_transition-motion-ok);
}
}
Einige gemeinsame Stile
Die Schriftart von Schaltflächen und Eingaben muss auf inherit
festgelegt sein, damit sie mit dem
den restlichen Seitenschriftarten. Andernfalls werden sie vom Browser gestaltet. Dies gilt auch für
gilt für letter-spacing
. Durch Festlegen von line-height
auf 1.5
wird der Letterbox-Text gesetzt.
, um dem Text etwas Platz darüber und darunter zu geben:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
/* …CSS variables */
font: inherit;
letter-spacing: inherit;
line-height: 1.5;
border-radius: var(--_border-radius);
}
Stile für Schaltflächen festlegen
Selektoranpassung
Der Selektor input[type="file"]
ist nicht der Schaltflächenteil des Eingangs, der
Das Pseudoelement ::file-selector-button
ist, also habe ich input[type="file"]
entfernt.
aus der Liste:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
}
Anpassungen für Cursor und Berührung
Zuerst passe ich den Cursor an den Stil pointer
an, damit die Schaltfläche besser
den Mausnutzern zeigen,
dass sie interaktiv ist. Dann füge ich touch-action: manipulation
zu
dass Klicks nicht erst warten müssen, bis ein potenzieller Doppelklick zu beobachten ist.
Schaltflächen fühlen sich schneller an:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
cursor: pointer;
touch-action: manipulation;
}
Farben und Rahmen
Dann passe ich die Schriftgröße, den Hintergrund, den Text und die Rahmenfarben an. der zuvor festgelegten adaptiven benutzerdefinierten Eigenschaften:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
font-size: var(--_size, 1rem);
font-weight: 700;
background: var(--_bg);
color: var(--_text);
border: 2px solid var(--_border);
}
Schatten
Auf die Schaltflächen werden einige großartige Techniken angewendet. Die
text-shadow
ist
die Anpassung an Helligkeit und Dunkelheit, wodurch ein angenehmes, subtiles Erscheinungsbild der Schaltfläche entsteht.
Text liegt gut auf dem Hintergrund. Für die
box-shadow
,
werden drei Schatten zugewiesen. Die erste, --_shadow-2
, ist ein normaler Kastenschatten.
Der zweite Schatten ist ein Trick für das Auge, durch den die Schaltfläche
ein wenig abgeschrägt. Der letzte Schatten ist für die Markierung,
mit einer Größe von 0 festgelegt. Sie wird jedoch später
eine Größe zugewiesen und so umgestellt,
auf dem Knopfdruck weiter wachsen kann.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
box-shadow:
var(--_shadow-2),
var(--_shadow-depth),
0 0 0 var(--_highlight-size) var(--_highlight)
;
text-shadow: var(--_ink-shadow);
}
Layout
Ich habe der Schaltfläche ein Flexbox-Layout gegeben,
insbesondere ein inline-flex
-Layout, das zum Inhalt passt. Dann zentriere ich
den Text und richten Sie die untergeordneten Elemente vertikal und horizontal am
center. Dadurch werden Symbole und andere
Schaltflächenelemente richtig ausgerichtet.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
}
Abstand
Für den Schaltflächenabstand habe ich
gap
, um Geschwister zu behalten
berührende und logische
Eigenschaften für den Abstand, also
funktioniert bei allen Textlayouts.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
gap: 1ch;
padding-block: var(--_padding-block);
padding-inline: var(--_padding-inline);
}
Benutzeroberflächen bei Berührung und Maus
Der nächste Abschnitt bezieht sich hauptsächlich auf Touch-Nutzer auf Mobilgeräten. Die erste
Property,
user-select
,
gilt für alle Nutzenden. verhindert, dass der Schaltflächentext hervorgehoben wird. Das ist meist
auf Geräten mit Touchscreen sichtbar, wenn eine Taste angetippt und gedrückt wird und das Bedienelement
wird der Text der Schaltfläche hervorgehoben.
Ich habe im Allgemeinen festgestellt, dass dies bei den Schaltflächen
deswegen deaktiviere ich sie, indem ich „user-select
“ auf „Keine“ setze. Auf Markierungsfarben tippen
(-webkit-tap-highlight-color
)
und das Kontextmenü des Betriebssystems
(-webkit-touch-callout
)
sind weitere sehr weborientierte Schaltflächenfunktionen, die nicht mit den allgemeinen
Schaltfläche der Nutzenden, also entferne ich sie ebenfalls.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
Übergänge
Die adaptive Variable --_transition
wird der
transition-Attribut:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
transition: var(--_transition);
}
Wenn der Nutzer den Mauszeiger darauf bewegt und der Nutzer nicht aktiv darauf drückt, wird die Schattenhervorhebung angepasst. damit es einen schönen Fokus erhält, der innerhalb des Schaltfläche:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
):where(:not(:active):hover) {
--_highlight-size: .5rem;
}
Vergrößere dabei den Versatz der Fokuskontur zur Schaltfläche. schönes, fokussiertes Aussehen, das von der Schaltfläche aus herauswächst:
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Symbole
Für die Verarbeitung von Symbolen enthält die Auswahl einen :where()
-Selektor für das direkte SVG-Format
untergeordnete Elemente oder Elemente mit dem benutzerdefinierten Attribut data-icon
. Die Symbolgröße ist festgelegt
mit der benutzerdefinierten Eigenschaft unter Verwendung von Inline- und Blocklogikeigenschaften. Strichfarbe
festgelegt ist, sowie ein
drop-shadow
entsprechend dem text-shadow
. flex-shrink
ist auf 0
gesetzt, sodass das Symbol nie
zerquetscht. Zuletzt wähle ich Liniensymbole aus
und weise diese Stile hier mit
fill: none
- und round
-Linienabschlüsse und Linienverbindungen:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
) > :where(svg, [data-icon]) {
block-size: var(--_icon-size);
inline-size: var(--_icon-size);
stroke: var(--_icon-color);
filter: drop-shadow(var(--_ink-shadow));
flex-shrink: 0;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
Schaltflächen zum Senden anpassen
Ich wollte ein leicht beworbenes Aussehen der Schaltflächen einreichen und erreichte indem Sie die Textfarbe der Schaltflächen zur Akzentfarbe machen:
:where(
[type="submit"],
form button:not([type],[disabled])
) {
--_text: var(--_accent);
}
Tasten zum Zurücksetzen anpassen
Ich wollte die Tasten zum Zurücksetzen mit integrierten Warnzeichen haben, um Nutzende auf des potenziell destruktiven Verhaltens. Ich habe auch das helle Design mit mehr roten Akzenten als das dunkle Design. Die Anpassung erfolgt durch die entsprechende helle oder dunkle Grundfarbe ändern, und die Schaltfläche Aktualisieren Sie den Stil:
:where([type="reset"]) {
--_border-light: hsl(0 100% 83%);
--_highlight-light: hsl(0 100% 89% / 20%);
--_text-light: hsl(0 80% 50%);
--_text-dark: hsl(0 100% 89%);
}
Ich fand es auch gut, wenn die Umrissfarbe des Fokus zum Akzent
Rot. Die Textfarbe ändert sich von einem Dunkelrot in ein helles Rot. Ich lege die Umrissfarbe fest,
Übereinstimmung mit dem Keyword
currentColor
:
:where([type="reset"]):focus-visible {
outline-color: currentColor;
}
Deaktivierte Schaltflächen anpassen
Es kommt häufig vor, dass deaktivierte Schaltflächen während der versuchen, die deaktivierte Schaltfläche zu reduzieren, sodass sie weniger aktiv erscheint. Ich habe sie jeweils getestet und überprüft, ob sie bestanden wurden. Der HSL-Helligkeitswert wird bis zum in Entwicklertools oder VisBug übergebene Punktzahl.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
)[disabled] {
--_bg: none;
--_text-light: hsl(210 7% 40%);
--_text-dark: hsl(210 11% 71%);
cursor: not-allowed;
box-shadow: var(--_shadow-1);
}
Schaltflächen für die Dateieingabe anpassen
Die Schaltfläche für die Dateieingabe ist ein Container für eine Spanne und eine Schaltfläche. Preisvergleichsportal kann
Stil des Eingabecontainers und der verschachtelten Schaltfläche,
die Spanne. Dem Container wird max-inline-size
zugewiesen, daher wird er nicht größer als
während inline-size: 100%
sich verkleinern und anpassen lässt
Container kleiner sind als sie ist. Als Hintergrundfarbe ist eine adaptive Farbe festgelegt.
das dunkler als andere Oberflächen ist, sodass es hinter der Dateiauswahltaste liegt.
:where(input[type="file"]) {
inline-size: 100%;
max-inline-size: max-content;
background-color: var(--_input-well);
}
Die Schaltfläche für die Dateiauswahl und die Schaltflächen für den Eingabetyp
appearance: none
, um alle vom Browser bereitgestellten Stile zu entfernen,
durch die anderen Schaltflächenstile überschrieben werden.
:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
appearance: none;
}
Zuletzt wird der Rand zum inline-end
der Schaltfläche hinzugefügt, um den Span-Text zu verschieben
von der Schaltfläche entfernt, sodass Raum geschaffen wird.
:where(input[type="file"])::file-selector-button {
margin-inline-end: var(--_padding-inline);
}
Ausnahmen für spezielles dunkles Design
Ich habe den primären Aktionsschaltflächen einen dunkleren Hintergrund für stärkere Kontraste zugewiesen. Text, wodurch sie ein etwas stärker hervorgehobenes Aussehen erhalten.
@media (prefers-color-scheme: dark) {
:where(
[type="submit"],
[type="reset"],
[disabled],
form button:not([type="button"])
) {
--_bg: var(--_input-well);
}
}
Varianten erstellen
Ich zeige Ihnen aus Spaß und weil es praktisch ist, Varianten. Eine Variante ist sehr dynamisch, ähnlich wie Hauptschaltflächen sehen. Eine andere Variante ist groß. Die letzte Variante hat ein Symbol mit Farbverlauf.
Leuchtende Schaltfläche
Für diesen Schaltflächenstil habe ich die Basis-Requisiten direkt mit Blau überschrieben. Farben. Das ging zwar schnell und einfach, aber die adaptiven Requisiten und Looks wurden entfernt. im hellen und dunklen Design gleich.
.btn-custom {
--_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
--_border: hsl(228 89% 63%);
--_text: hsl(228 89% 100%);
--_ink-shadow: 0 1px 0 hsl(228 57% 50%);
--_highlight: hsl(228 94% 67% / 20%);
}
Große Schaltfläche
Für diesen Schaltflächenstil wird die benutzerdefinierte Eigenschaft --_size
geändert.
Padding und andere Abstandselemente sind relativ zu dieser Größe, sie werden mit der Größe skaliert
proportional zur neuen Größe.
.btn-large {
--_size: 1.5rem;
}
Symbolschaltfläche
Dieser Symboleffekt hat nichts mit den Schaltflächenstile zu tun, zeige ich Ihnen, wie Sie das mit nur wenigen CSS-Eigenschaften erreichen und wie gut die Schaltfläche verarbeitet Symbole, die kein SVG-Inline-Bild sind.
[data-icon="cloud"] {
--icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;
-webkit-mask: var(--icon-cloud);
mask: var(--icon-cloud);
background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}
Fazit
Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du... ‽ 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können.
Erstelle eine Demo, twittere mir Links und ich füge sie hinzu im Abschnitt „Community-Remixe“ weiter unten.
Community-Remixe
Hier gibt es noch nichts zu sehen.
Ressourcen
- Quellcode auf GitHub