Schaltflächenkomponente erstellen

Grundlegende Informationen zum Erstellen farbadaptiver, responsiver und barrierefreier <button>-Komponenten.

Adam Argyle

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

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> <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 {}

</ph>

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>

</ph>

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