Tworzenie komponentu przycisku

Podstawowe informacje o tworzeniu komponentów <button>, które dostosowują się do kolorów, są elastyczne i dostępne.

Adam Argyle

W tym poście chcę opowiedzieć o tym, jak stworzyć moduł adaptacji kolorów, elastyczny i łatwo dostępny element <button>. Wypróbuj wersję demonstracyjną i zobacz źródło

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

<button> został stworzony z myślą o interakcjach użytkownika. Jego zdarzenie click jest wyzwalane za pomocą klawiatury, myszy, dotyku, głosu i nie tylko oraz inteligentne reguły dotyczące . Dostępne są też z niektórymi stylami domyślnymi w każdej przeglądarce, dzięki czemu można używać ich bezpośrednio, wszelkie dostosowania. Użyj color-scheme, aby wyrazić zgodę na jasne i ciemne przyciski udostępniane w przeglądarce.

Występują też różne typy , widoczne w poprzednim umieszczonym elemencie Codepen. <button> bez typu dostosowują się do typu elementu <form>, zmieniając typ przesyłania.

<!-- 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">

W tegorocznym wyzwaniu GUI, każdy przycisk otrzyma style, które pomogą wizualnie wyróżnić jego intencję. Resetuj będą oznaczone kolorami ostrzegawczymi, ponieważ są szkodliwe. Prześlij otrzyma niebieski tekst uzupełniający, dzięki czemu będą one nieco bardziej promowane niż zwykłe przyciskami.

Przyciski mają też pseudoklasy. który ma być używany do określania stylu. Klasy te dostarczają elementów przyczepnych dla CSS do dostosowywania działanie przycisku: :hover gdy kursor myszy znajduje się nad przyciskiem, :active, gdy mysz lub naciska klawiaturę, :focus lub :focus-visible za tworzenie stylu dla technologii wspomagających osoby z niepełnosprawnością.

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}

.

Markup

Oprócz typów przycisków wymienionych w specyfikacji HTML dodaliśmy tag przycisk z ikoną i przycisk z niestandardową klasą 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">

Następnie w celach testowania umieszcza się każdy przycisk wewnątrz formularza. W ten sposób mogę zapewnić, są automatycznie aktualizowane dla przycisku domyślnego, który działa jak Prześlij. Zmieniam też strategię dotyczącą ikon z wbudowanego SVG na zamaskowane SVG, żeby obie działały tak samo dobrze.

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

Macierz kombinacji jest w tym momencie przytłaczająca. Przycisk Między typów, pseudoklas oraz bycia w formie lub poza nią, istnieje kombinacji przycisków. To dobrze, że usługi porównywania cen pozwalają przedstawić każdy ich wyraźnie!

Ułatwienia dostępu

Elementy przycisków są naturalnie dostępne, ale jest kilka i ulepszeniach.

Najeżdżanie kursorem i jednoczesne ustawianie ostrości

Chcę zgrupować :hover i :focus razem z funkcją :is() za pomocą pseudoselektora. Dzięki temu moje interfejsy zawsze uwzględniają klawiaturę i technologii wspomagających osoby z niepełnosprawnością.

button:is(:hover, :focus) {
  …
}

Interaktywny pierścień ostrości

Lubię animować pierścień ostrości dla użytkowników klawiatury i technologii wspomagających osoby z niepełnosprawnością. Ja można to osiągnąć, animując kontur przycisku oddalonego o 5 pikseli, ale tylko gdy przycisk jest nieaktywny. Efekt jest taki, że pierścień ostrości zmniejsza się z powrotem do rozmiaru przycisku po naciśnięciu.

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

Zapewnianie kontrastu kolorów

Istnieje co najmniej 4 kombinacje kolorów dla jasnego i ciemnego motywu, musisz zwrócić uwagę na kontrast kolorów: przycisk, przycisk przesyłania, przycisk resetowania, wyłączony przycisk. VisBug jest tu używany do sprawdzać i wyświetlać wszystkie wyniki jednocześnie:

Ukrywanie ikon przed osobami, które nie widzą

Przy tworzeniu przycisku ikony powinna ona zapewniać pomoc wizualną tekst przycisku. Oznacza to też, że ikona nie jest wartościowa dla osób widzących. straty. Na szczęście przeglądarka umożliwia ukrywanie elementów przed czytnikiem ekranu. dzięki której osoby niedowidzące nie muszą zaprzątać sobie głowy ozdobnymi przyciskami obrazy:

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>

. .

Style

W kolejnej sekcji najpierw utworzę system właściwości niestandardowych do zarządzania adaptacyjne style przycisku. Dzięki tym właściwościom niestandardowym mogę wybrać elementy i dostosować ich wygląd.

Adaptacyjna strategia dotycząca właściwości niestandardowej

Niestandardowa strategia dotycząca własności wykorzystywana w tym wyzwaniu GUI jest bardzo podobna do tej używany do budowania schematu kolorów. Dla: system kolorów jasno-ciemnych barw, niestandardową właściwość każdego motywu i nadać im odpowiednią nazwę. Następnie jedna właściwość niestandardowa służy do przechowywania bieżącej wartości motywu i jest przypisana do właściwości CSS. Później singiel właściwość niestandardową można zmienić na inną wartość, a następnie zaktualizować przycisk stylu.

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);
  }
}

Podoba mi się to, że jasne i ciemne motywy są wyraziste i wyraźne. pośrednich i abstrakcyjnych są odrzucane do właściwości niestandardowej --_bg, który jest obecnie jedynym „reaktywnym” usłudze; --_bg-light i --_bg-dark są statyczny. Jasny motyw jest motywem domyślnym, a także wyraźnie widać, jest stosowany tylko warunkowo.

Przygotowanie do zachowania spójności projektu

Wspólny selektor

Ten selektor służy do kierowania reklam na wszystkie typy przycisków. trochę przytłaczające. :where() to więc jego dostosowywanie nie wymaga żadnych konkretów. Przyciski są często dostosowane do alternatywnych scenariuszy, a selektor :where() gwarantuje, że jest łatwe. Wewnątrz :where() wybierany jest każdy typ przycisku, w tym ::file-selector-button, których nie można użyć w użyciu wewnątrz elementu :is() lub :where().

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  …
}

Wszystkie właściwości niestandardowe będą ograniczone do tego selektora. Czas na sprawdzenie wszystkich właściwości niestandardowych. W tej sekcji Przycisk Opiszę każdą grupę po drodze, na końcu tej sekcji znajdziesz konteksty ruchu.

Kolor uzupełniający przycisku

Przyciski i ikony przesyłania idealnie nadają się do tego, aby kolorować:

--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);

Kolor tekstu przycisku

Kolor tekstu przycisków nie jest biały ani czarny; jego wersja jest przyciemniona lub rozjaśniona. z --_accent w przypadku hsl() i Trzymanie się barwy 210:

--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);

Kolor tła przycisku

Tła przycisków mają taki sam wzór hsl(), z wyjątkiem jasnego motywu są białe, więc ich powierzchnia sprawia, że są widoczne użytkownika lub na innych platformach:

--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);

Tło przycisku

Dzięki temu kolorowi tła powierzchnia jest wyświetlana za innymi powierzchniami, przydatne do tła danych wejściowych pliku:

--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);

Dopełnienie przycisku

Odstępy wokół tekstu na przycisku określa się za pomocą ch jednostka, czyli względna długość do rozmiaru czcionki. Ma to kluczowe znaczenie przy dużych przyciski mogą po prostu zwiększyć skalę font-size i przycisków przycisków. proporcjonalnie:

--_padding-inline: 1.75ch;
--_padding-block: .75ch;

Obramowanie przycisku

Promień obramowania przycisku jest ukryty we właściwości niestandardowej, dzięki czemu dane wejściowe pliku mogą tak jak pozostałe przyciski. Kolory obramowania mają ustawiony kolor adaptacyjny. system:

--_border-radius: .5ch;

--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);

Efekt podświetlenia przycisku po najechaniu kursorem myszy

Określają one właściwość rozmiaru na potrzeby przechodzenia po interakcji. kolor wyróżnienia jest zgodny z adaptacyjnym systemem kolorów. Omówię, wchodzą w interakcję później w tym poście, ale ostatecznie będą używane jako box-shadow efekt:

--_highlight-size: 0;

--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);

Cień tekstu przycisku

Każdy przycisk ma styl subtelnego cienia tekstu. Dzięki temu tekst będzie wyświetlać się nad poprawi czytelność i sprawi, że prezentacja będzie bardziej estetyczna.

--_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);

Ikona przycisku

Ikony mają rozmiar 2 znaków, a to dzięki jednostce względnej ch. dzięki czemu ikona będzie skalowana proporcjonalnie do tekstu przycisku. Kolor ikony jest dopasowany do motywu graficznego interfejsu --_accent-color koloru.

--_icon-size: 2ch;
--_icon-color: var(--_accent);

Cień przycisku

Aby cienie prawidłowo przystosowały się do światła i ciemności, muszą odpowiednio kolor i przezroczystość. Jasne cienie w motywie sprawdzają się najlepiej, gdy są subtelne i zabarwione w kierunku koloru powierzchni, na którą się nakładają. Ciemne cienie muszą być ciemniejsze bardziej nasycone, aby mogły nakładać się na ciemniejsze kolory powierzchni.

--_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);

Dzięki adaptacyjnym kolorom i swoim mocnym stronom mogę stworzyć 2 głębie cieni:

--_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%));

Dodatkowo, aby przyciski wyglądały nieco trójwymiarowo, 1px w cieniu ramki tworzy iluzję:

--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);

Przejścia przycisków

Zgodnie ze wzorcem kolorów adaptacyjnych tworzę dwie właściwości statyczne, aby przytrzymaj opcje systemowe projektu:

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);

Wszystkie właściwości razem w selektorze

: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);
}

Adaptacje ciemnego motywu

Wartość wzorca statycznych rekwizytów -light i -dark stanie się jasna, rekwizyty w ciemnym motywie są ustawione:

@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);
  }
}

Nie tylko to dobrze się wyświetla, ale użytkownicy takich przycisków niestandardowych mogą używać muszą dostosować się do preferencji użytkownika.

Obniżona adaptacja ruchu

Jeśli ruch jest prawidłowy u tego użytkownika, przypisz rolę --_transition do 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);
  }
}

Kilka wspólnych stylów

Czcionki przycisków i danych wejściowych muszą być ustawione na inherit, tak aby były zgodne reszta czcionek strony; W przeciwnym razie ich styl będzie określany przez przeglądarkę. To także dotyczy witryny letter-spacing. Ustawienie line-height na 1.5 powoduje ustawienie pola litery. aby tekst miał nieco miejsca nad i pod nim:

: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);
}

Przyciski stylu

Regulacja selektora

Selektor input[type="file"] nie jest przyciskiem w danych wejściowych, parametr pseudoelement ::file-selector-button to, więc input[type="file"] został usunięty z listy:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  
}

Regulacja kursora i dotyku

Najpierw ustawiam styl kursora na pointer, dzięki czemu przycisk będzie wskazywać, że reklama jest interaktywna. Następnie dodaję touch-action: manipulation do nie muszą czekać i obserwować potencjalne dwukrotne kliknięcie. działają szybciej.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

Kolory i obramowanie

Następnie dostosowuję rozmiar czcionki, tło, tekst i obramowanie, używając ustawionych wcześniej adaptacyjnych właściwości niestandardowych:

: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);
}

Cienie

Zastosowano w nich świetne techniki. text-shadow to dostosowuje się do jasności i ciemności, tworząc przyjemny, subtelny wygląd przycisku aby dobrze umieścić tekst na tle. W przypadku atrybutu box-shadow przypisane są trzy cienie. Pierwszy, --_shadow-2, to zwykły cień ramki. Drugi cień sprawia, że przycisk wygląda jak nieco skrócony. Ostatni cień dotyczy podświetlenia po najechaniu kursorem, w rozmiarze 0, ale później otrzyma rozmiar i zostanie przeniesiony, od kliknięcia przycisku.

: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);
}

Układ

Nadaję przyciskowi układ flexbox, a konkretnie układ inline-flex, który będzie pasował do jej treści. Następnie wyśrodkowuję a następnie wyrównać elementy podrzędne względem center. Pomoże to ikonom i innym elementy przycisku i ich prawidłowe wyrównanie.

: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;
}

Odstępy

Aby dodać odstępy między przyciskami, gap, aby zachować elementy równorzędne od kontaktu z użytkownikiem i logicznie właściwości dopełnienia, więc przycisk jest stosowana we wszystkich układach tekstu.

: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);
}

Obsługa dotyku i myszy

Ta sekcja jest przeznaczona głównie dla użytkowników urządzeń dotykowych. Pierwszy usługi, user-select jest przeznaczona dla wszystkich użytkowników; Uniemożliwi to podświetlanie tekstu przycisku. Dotyczy to głównie jest zauważalny na urządzeniach dotykowych po naciśnięciu i przytrzymaniu przycisku. system wyróżni tekst przycisku.

Wydaje mi się, że wbudowane przyciski nie są zbyt wygodne w obsłudze. aplikacji, więc wyłączę, ustawiając ustawienie user-select na „brak”. Kliknij kolory zaznaczenia (-webkit-tap-highlight-color) i menu kontekstowe systemu operacyjnego (-webkit-touch-callout) są też inne przyciski: oczekiwania użytkowników przycisków, więc je usuwam.

: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;
}

Przejścia

Zmienna adaptacyjna --_transition jest przypisana do funkcji Właściwość transition:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  transition: var(--_transition);
}

Dostosuj podświetlenie cienia po najechaniu kursorem, gdy użytkownik ich nie naciska Nadaje mu estetyczny wygląd, przycisk:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

Po ustawieniu ostrości zwiększ przesunięcie konturu ostrości za pomocą przycisku, nadając mu również estetyczny wygląd, który powiększa się po kliknięciu przycisku:

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

Ikony

Do obsługi ikon selektor ma dodany selektor :where() dla bezpośredniego SVG elementy podrzędne lub elementy z atrybutem niestandardowym data-icon. Rozmiar ikon jest ustawiony z właściwością niestandardową za pomocą właściwości wbudowanych i logicznych. Kolor konturu oraz drop-shadow pasujący do text-shadow. flex-shrink ma wartość 0, więc ikona nigdy nie będzie ściśnięty. Wybieram ikony z linijką i przypisujemy do nich style Limity (fill: none i round) i połączenia wierszy:

: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;
}

Dostosowywanie przycisków przesyłania

Chciałem, aby przyciski były nieco promowane, dzięki czemu udało mi się W ten sposób ustawisz kolor tekstu przycisków jako kolor uzupełniający:

:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
}

Dostosuj przyciski resetowania

Zależało mi na tym, aby przyciski resetowania miały wbudowane znaki ostrzegawcze, które ostrzegały użytkowników ich potencjalnie destrukcyjne zachowanie. Wybrałem też jasny motyw z większą liczbą czerwonych akcentów niż ciemny motyw. Dostosowanie polega na zmiana odpowiedniego jasnego lub ciemnego koloru tła, a przycisk zaktualizuj styl:

: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%);
}

Dobrze byłoby też, gdy kolor konturu ostrości pasował do akcentu czerwony. Kolor tekstu zmienia kolor z ciemnoczerwonego na jasnoczerwony. Ustawiam kolor konturu dopasuj to do słowa kluczowego currentColor:

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

Dostosuj wyłączone przyciski

Bardzo często, gdy wyłączone przyciski mają niski kontrast kolorów podczas spróbuje wyciszyć wyłączony przycisk, aby wyglądał na mniej aktywny. Przetestowałem(-am) każdy kolorów i udało się uzyskać zgodność, zwiększając wartość jasności HSL do momentu, wynik w Narzędziach deweloperskich lub VisBug.

: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);
}

Dostosowywanie przycisków wprowadzania plików

Przycisk do wprowadzania danych jest kontenerem dla spanu i przycisku. Usługa porównywania cen może zmienić styl kontenera wejściowego oraz zagnieżdżonego przycisku, zakres. Kontener ma uprawnienia max-inline-size, więc nie powiększy się o więcej niż musi, a inline-size: 100% pozwoli się zmniejszyć i dopasować i w przypadku kontenerów o mniejszej zawartości. Kolor tła jest ustawiony na kolor adaptacyjny. który jest ciemniejszy niż inne platformy, więc znajduje się za przyciskiem wyboru pliku.

:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

Przycisk wyboru pliku i przyciski typu danych wejściowych są wyraźnie widoczne appearance: none, aby usunąć wszystkie style udostępnione w przeglądarce, które nie zostały zastąpione przez inne style przycisków.

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

Na koniec do elementu inline-end przycisku dodawany jest margines, aby wypchnąć tekst spanu. odsunięcie przycisku, pozostawiając trochę miejsca.

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

Specjalne wyjątki dotyczące ciemnego motywu

Przyciski czynności głównych miały ciemniejsze tło, aby zwiększyć kontrast przez co nadaje im wygląd nieco bardziej promowany.

@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

Tworzę warianty

Dla zabawy i praktycznej funkcji pokażę, jak stworzyć wersji. Jedna z wersji jest bardzo żywa, podobnie jak często przyciski główne. patrz. Inny wariant jest duży. Ostatni wariant ma ikonę z gradientem.

Kolorowy przycisk

Aby uzyskać taki styl przycisków, bezpośrednio zastąpiłem podstawowe rekwizyty kolorem niebieskim kolorów. Było to szybkie i łatwe, ale w ten sposób eliminowało adaptacyjne rekwizyty i wygląd tak samo zarówno w przypadku jasnych, jak i ciemnych motywów.

.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%);
}

Duży przycisk

Ten styl przycisku można osiągnąć, modyfikując właściwość niestandardową --_size. Dopełnienie i inne elementy przestrzeni są zależne od tego rozmiaru, skalowane wzdłuż proporcjonalnie do nowego rozmiaru.

.btn-large {
  --_size: 1.5rem;
}

Przycisk ikony

Ten efekt ikon nie ma nic wspólnego z naszymi stylami przycisków, ale jest jak to osiągnąć za pomocą kilku właściwości CSS, obsługuje ikony, które nie są wbudowanym SVG.

[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));
}

Podsumowanie

Wiesz już, jak to zrobiłem. Jak Ty? 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie.

Utwórz wersję demonstracyjną, a potem dodaj linki do funkcji tweetuj mi. znajdziesz poniżej w sekcji z remiksami na karcie Społeczność.

Remiksy utworzone przez społeczność

Na razie nic tu nie ma.

Zasoby

• Kod źródłowy w GitHubie