Membuat komponen tombol

Ringkasan dasar tentang cara membuat komponen <button> yang responsif, mudah diakses, dan dapat menyesuaikan warna.

Adam Argyle

Dalam postingan ini, saya ingin membagikan pemikiran saya tentang cara membuat elemen <button> yang adaptif terhadap warna, responsif, dan mudah diakses. Coba demo dan lihat sumbernya

Tombol berinteraksi melalui keyboard dan mouse dalam tema terang dan gelap.

Jika Anda lebih suka video, berikut versi YouTube dari postingan ini:

Ringkasan

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Elemen <button> dibuat untuk interaksi pengguna. Peristiwa click-nya dipicu dari keyboard, mouse, sentuhan, suara, dan lainnya, dengan aturan cerdas tentang waktunya. Selain itu, setiap browser memiliki beberapa gaya default, sehingga Anda dapat menggunakannya secara langsung tanpa penyesuaian apa pun. Gunakan color-scheme untuk memilih ikut serta dalam tombol terang dan gelap yang disediakan browser juga.

Ada juga berbagai jenis tombol, yang masing-masing ditampilkan dalam sematan Codepen sebelumnya. <button> tanpa jenis akan beradaptasi dengan berada dalam <form>, berubah menjadi jenis kirim.

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

Dalam Tantangan GUI bulan ini, setiap tombol akan mendapatkan gaya untuk membantu membedakan maksudnya secara visual. Tombol reset akan memiliki warna peringatan karena bersifat merusak, dan tombol kirim akan mendapatkan teks aksen biru sehingga terlihat sedikit lebih dipromosikan daripada tombol biasa.

Pratinjau kumpulan akhir semua jenis tombol, ditampilkan dalam formulir dan tidak dalam formulir, dengan tambahan yang bagus untuk tombol ikon dan tombol yang disesuaikan.
Pratinjau kumpulan akhir semua jenis tombol, ditampilkan dalam formulir dan tidak dalam formulir, dengan tambahan yang bagus untuk tombol ikon dan tombol yang disesuaikan

Tombol juga memiliki class pseudo untuk digunakan CSS dalam mengatur gaya. Class ini menyediakan hook CSS untuk menyesuaikan tampilan tombol: :hover untuk saat kursor mouse berada di atas tombol, :active untuk saat kursor mouse atau keyboard menekan, dan :focus atau :focus-visible untuk membantu gaya teknologi pendukung. 

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
Pratinjau set akhir semua jenis tombol dalam tema gelap.
Pratinjau set akhir dari semua jenis tombol dalam tema gelap

Markup

Selain jenis tombol yang disediakan oleh spesifikasi HTML, saya telah menambahkan tombol dengan ikon dan tombol dengan class kustom 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">

Kemudian, untuk pengujian, setiap tombol ditempatkan di dalam formulir. Dengan begitu, saya dapat memastikan gaya diperbarui dengan tepat untuk tombol default, yang berfungsi sebagai tombol kirim. Saya juga mengubah strategi ikon, dari SVG inline menjadi SVG yang di-masking, untuk memastikan keduanya berfungsi sama baiknya.

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

Kombinasi matriks cukup banyak pada tahap ini. Antara jenis tombol, pseudo-class, dan berada di dalam atau di luar formulir, ada lebih dari 20 kombinasi tombol. Untungnya, CSS dapat membantu kita mengartikulasikan setiap perbedaan tersebut dengan jelas.

Aksesibilitas

Elemen tombol dapat diakses secara alami, tetapi ada beberapa peningkatan umum.

Arahkan kursor dan fokus bersamaan

Saya ingin mengelompokkan :hover dan :focus bersama dengan pseudo-selektor fungsional :is(). Hal ini membantu memastikan antarmuka saya selalu mempertimbangkan gaya keyboard dan teknologi pendukung.

button:is(:hover, :focus) {
  …
}
Coba demo!

Cincin fokus interaktif

Saya suka menganimasikan ring fokus untuk pengguna keyboard dan teknologi pendukung. Saya melakukan ini dengan menganimasikan garis batas menjauh dari tombol sebesar 5 piksel, tetapi hanya saat tombol tidak aktif. Tindakan ini akan membuat efek yang membuat ring fokus menyusut kembali ke ukuran tombol saat ditekan.

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

Memastikan kontras warna yang lulus

Setidaknya ada empat kombinasi warna berbeda di seluruh tema terang dan gelap yang perlu mempertimbangkan kontras warna: tombol, tombol kirim, tombol reset, dan tombol yang dinonaktifkan. VisBug digunakan di sini untuk memeriksa dan menampilkan semua skor sekaligus:

Menyembunyikan ikon dari orang yang tidak dapat melihat

Saat membuat tombol ikon, ikon harus memberikan dukungan visual pada teks tombol. Artinya, ikon tersebut juga tidak berguna bagi seseorang yang mengalami kehilangan penglihatan. Untungnya, browser menyediakan cara untuk menyembunyikan item dari teknologi pembaca layar sehingga orang dengan kehilangan penglihatan tidak terganggu dengan gambar tombol dekoratif:

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>
Chrome DevTools menampilkan hierarki aksesibilitas untuk tombol. Hierarki mengabaikan gambar tombol karena aria-hidden disetel ke benar (true).
Chrome DevTools menampilkan hierarki aksesibilitas untuk tombol. Hierarki mengabaikan gambar tombol karena aria-hidden disetel ke benar (true)

Gaya

Di bagian berikutnya ini, saya akan membuat sistem properti kustom terlebih dahulu untuk mengelola gaya adaptif tombol. Dengan properti kustom tersebut, saya dapat mulai memilih elemen dan menyesuaikan tampilannya.

Strategi properti kustom adaptif

Strategi properti kustom yang digunakan dalam Tantangan GUI ini sangat mirip dengan yang digunakan dalam membangun skema warna. Untuk sistem warna terang dan gelap adaptif, properti kustom untuk setiap tema ditentukan dan diberi nama yang sesuai. Kemudian, satu properti kustom digunakan untuk menyimpan nilai tema saat ini dan ditetapkan ke properti CSS. Selanjutnya, satu properti kustom dapat diupdate ke nilai yang berbeda, lalu memperbarui gaya tombol.

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

Yang saya sukai adalah tema terang dan gelap bersifat deklaratif dan jelas. Pengalihan dan abstraksi dimuat ke dalam properti kustom --_bg, yang kini menjadi satu-satunya properti "reaktif"; --_bg-light dan --_bg-dark bersifat statis. Juga jelas bahwa tema terang adalah tema default dan tema gelap hanya diterapkan secara kondisional.

Mempersiapkan konsistensi desain

Pemilih bersama

Selektor berikut digunakan untuk menargetkan semua jenis tombol dan agak membingungkan pada awalnya. :where() digunakan sehingga penyesuaian tombol tidak memerlukan spesifisitas. Tombol sering kali disesuaikan untuk skenario alternatif dan pemilih :where() memastikan bahwa tugas menjadi mudah. Di dalam :where(), setiap jenis tombol dipilih, termasuk ::file-selector-button, yang tidak dapat digunakan di dalam :is() atau :where().

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

Semua properti kustom akan dicakup dalam pemilih ini. Saatnya meninjau semua properti kustom. Ada beberapa properti kustom yang digunakan dalam tombol ini. Saya akan menjelaskan setiap grup saat kita membahasnya, lalu membagikan konteks gerakan yang dikurangi dan gelap di akhir bagian.

Warna aksen tombol

Tombol dan ikon kirim adalah tempat yang tepat untuk menambahkan sentuhan warna:

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

Warna tombol teks

Warna teks tombol bukan putih atau hitam, melainkan versi yang lebih gelap atau lebih terang dari --_accent menggunakan hsl() dan tetap menggunakan warna 210:

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

Warna latar tombol

Latar belakang tombol mengikuti pola hsl() yang sama, kecuali tombol tema terang—tombol tersebut disetel ke putih sehingga permukaannya membuatnya tampak dekat dengan pengguna, atau di depan permukaan lain:

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

Latar belakang tombol

Warna latar belakang ini digunakan untuk membuat permukaan muncul di belakang permukaan lain, berguna untuk latar belakang input file:

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

Padding tombol

Jarak di sekitar teks dalam tombol dilakukan menggunakan unit ch, panjang relatif terhadap ukuran font. Hal ini menjadi penting saat tombol besar dapat menaikkan font-size dan menskalakan tombol secara proporsional:

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

Batas tombol

Radius batas tombol disimpan ke dalam properti kustom sehingga input file dapat cocok dengan tombol lainnya. Warna batas mengikuti sistem warna adaptif yang telah ditetapkan:

--_border-radius: .5ch;

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

Efek sorotan saat kursor diarahkan ke tombol

Properti ini menetapkan properti ukuran untuk transisi pada interaksi, dan warna sorotan mengikuti sistem warna adaptif. Kita akan membahas cara interaksi ini di bagian selanjutnya dalam postingan ini, tetapi pada dasarnya, interaksi ini digunakan untuk efek box-shadow:

--_highlight-size: 0;

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

Bayangan teks tombol

Setiap tombol memiliki gaya bayangan teks yang halus. Hal ini membantu teks berada di atas tombol, sehingga meningkatkan keterbacaan dan menambahkan lapisan polesan presentasi yang bagus. 

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

Ikon tombol

Ikon berukuran dua karakter berkat unit ch panjang relatif lagi, yang akan membantu ikon diskalakan secara proporsional dengan teks tombol. Warna ikon mengandalkan --_accent-color untuk warna adaptif dan dalam tema. 

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

Bayangan tombol

Agar bayangan dapat beradaptasi dengan baik terhadap terang dan gelap, bayangan perlu mengubah warna dan opasitasnya. Bayangan tema terang paling baik jika halus dan diwarnai menuju warna permukaan yang dilapisinya. Bayangan tema gelap harus lebih gelap dan lebih tersaturasi sehingga dapat melapisi warna platform yang lebih gelap.

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

Dengan warna dan kekuatan adaptif, saya dapat merakit dua kedalaman bayangan:

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

Selain itu, untuk memberikan tampilan 3D pada tombol, 1pxbox-shadow menciptakan ilusi:

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

Transisi tombol

Dengan mengikuti pola untuk warna adaptif, saya membuat dua properti statis untuk menyimpan opsi sistem desain:

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

Semua properti bersama-sama dalam pemilih

Semua properti kustom dalam pemilih 

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

Tombol default ditampilkan dalam tema terang dan gelap secara berdampingan.

Adaptasi tema gelap

Nilai pola properti statis -light dan -dark menjadi jelas saat properti tema gelap ditetapkan:

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

Selain mudah dibaca, konsumen tombol kustom ini dapat menggunakan properti kosong dengan yakin bahwa tombol tersebut akan beradaptasi dengan tepat terhadap preferensi pengguna.

Adaptasi gerakan yang dikurangi

Jika gerakan tidak masalah bagi pengguna yang berkunjung ini, tetapkan --_transition ke 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);
  }
}

Beberapa gaya bersama

Tombol dan input harus memiliki font yang ditetapkan ke inherit agar cocok dengan font halaman lainnya; jika tidak, tombol dan input akan diberi gaya oleh browser. Hal ini juga berlaku untuk letter-spacing. Menetapkan line-height ke 1.5 akan menetapkan ukuran kotak surat untuk memberikan ruang di atas dan di bawah teks:

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Menata gaya tombol

Penyesuaian pemilih

Pemilih input[type="file"] bukan bagian tombol dari input, tetapi pseudo-elemen ::file-selector-button, jadi saya telah menghapus input[type="file"] dari daftar:

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

Penyesuaian kursor dan sentuh

Pertama, saya menata gaya kursor ke gaya pointer, yang membantu tombol menunjukkan kepada pengguna mouse bahwa tombol tersebut interaktif. Kemudian, saya menambahkan touch-action: manipulation untuk membuat klik tidak perlu menunggu dan mengamati potensi klik ganda, sehingga tombol terasa lebih cepat:

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

Warna dan batas

Selanjutnya, saya menyesuaikan ukuran font, latar belakang, teks, dan warna batas, menggunakan beberapa properti kustom adaptif yang ditetapkan sebelumnya:

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Bayangan

Tombol memiliki beberapa teknik hebat yang diterapkan. text-shadow dapat beradaptasi dengan terang dan gelap, sehingga menciptakan tampilan tombol yang menarik dan halus dengan teks yang ditempatkan dengan baik di atas latar belakang. Untuk box-shadow, tiga bayangan ditetapkan. Yang pertama, --_shadow-2, adalah bayangan kotak biasa. Bayangan kedua adalah trik untuk mata yang membuat tombol tampak sedikit miring ke atas. Bayangan terakhir adalah untuk sorotan saat mengarahkan kursor, awalnya berukuran 0, tetapi akan diberi ukuran nanti dan ditransisikan sehingga tampak tumbuh dari tombol.

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Tata Letak

Saya memberi tombol tata letak flexbox, khususnya tata letak inline-flex yang akan sesuai dengan kontennya. Kemudian, saya menempatkan teks di tengah, dan menyelaraskan turunan secara vertikal dan horizontal ke tengah. Hal ini akan membantu ikon dan elemen tombol lainnya agar selaras dengan benar.

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Spasi

Untuk jarak tombol, saya menggunakan gap agar elemen selevel tidak saling bersentuhan dan properti logis untuk padding sehingga jarak tombol berfungsi untuk semua tata letak teks. 

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

UX sentuh dan mouse

Bagian berikutnya sebagian besar ditujukan untuk pengguna sentuh di perangkat seluler. Properti pertama, user-select, adalah untuk semua pengguna; properti ini mencegah teks menandai teks tombol. Hal ini sebagian besar terlihat pada perangkat sentuh saat tombol diketuk dan ditahan, lalu sistem operasi menandai teks tombol.

Saya biasanya mendapati bahwa ini bukan pengalaman pengguna dengan tombol di aplikasi bawaan, jadi saya menonaktifkannya dengan menyetel user-select ke none. Ketuk warna sorotan (-webkit-tap-highlight-color) dan menu konteks sistem operasi (-webkit-touch-callout) adalah fitur tombol lain yang sangat berpusat pada web dan tidak sesuai dengan ekspektasi pengguna tombol umum, jadi saya juga menghapusnya.

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

Transisi

Variabel --_transition adaptif ditetapkan ke properti transition:

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

  transition: var(--_transition);
}

Saat kursor diarahkan, saat pengguna tidak menekan secara aktif, sesuaikan ukuran sorotan bayangan untuk memberikan tampilan fokus yang bagus yang tampak tumbuh dari dalam tombol:

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

Saat fokus, tingkatkan offset garis batas fokus dari tombol, sekaligus memberikan tampilan fokus yang bagus yang tampak tumbuh dari dalam tombol:

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

Ikon

Untuk menangani ikon, pemilih memiliki pemilih :where() tambahan untuk elemen turunan SVG langsung atau elemen dengan atribut kustom data-icon. Ukuran ikon ditetapkan dengan properti kustom menggunakan properti logis inline dan blok. Warna goresan ditetapkan, serta drop-shadow agar sesuai dengan text-shadow. flex-shrink disetel ke 0 sehingga ikon tidak pernah tertekan. Terakhir, saya memilih ikon garis dan menetapkan gaya tersebut di sini dengan ujung garis fill: none dan round serta sambungan garis:

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Menyesuaikan tombol kirim

Saya ingin tombol kirim memiliki tampilan yang sedikit lebih menonjol, dan saya mencapainya dengan membuat warna teks tombol menjadi warna aksen:

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Menyesuaikan tombol reset

Saya ingin tombol reset memiliki beberapa tanda peringatan bawaan untuk memberi tahu pengguna tentang potensi perilaku destruktif mereka. Saya juga memilih untuk menata gaya tombol tema terang dengan aksen merah yang lebih banyak daripada tema gelap. Penyesuaian dilakukan dengan mengubah warna dasar terang atau gelap yang sesuai, dan tombol akan memperbarui gaya:

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

Saya juga berpikir bahwa warna garis fokus akan lebih bagus jika cocok dengan aksen merah. Warna teks menyesuaikan dari merah tua ke merah muda. Saya membuat warna garis luar cocok dengan warna ini menggunakan kata kunci currentColor:

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Menyesuaikan tombol yang dinonaktifkan

Tombol yang dinonaktifkan sering kali memiliki kontras warna yang buruk selama upaya untuk meredam tombol yang dinonaktifkan agar tampak kurang aktif. Saya menguji setiap set warna dan memastikan set warna tersebut lulus, dengan menyesuaikan nilai kecerahan HSL hingga skor lulus di DevTools atau 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);
}

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Menyesuaikan tombol input file

Tombol input file adalah penampung untuk span dan tombol. CSS dapat menata gaya penampung input sedikit, serta tombol bertingkat, tetapi tidak span. Penampung diberi max-inline-size sehingga tidak akan tumbuh lebih besar dari yang diperlukan, sementara inline-size: 100% akan memungkinkan dirinya menyusut dan menyesuaikan penampung yang lebih kecil dari dirinya. Warna latar belakang ditetapkan ke warna adaptif yang lebih gelap daripada permukaan lainnya, sehingga terlihat di belakang tombol pemilih file.

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

Tombol pemilih file dan tombol jenis input secara khusus diberi appearance: none untuk menghapus gaya yang disediakan browser yang tidak ditimpa oleh gaya tombol lainnya. 

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

Terakhir, margin ditambahkan ke inline-end tombol untuk mendorong teks span menjauhi tombol, sehingga menciptakan ruang.

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Pengecualian tema gelap khusus

Saya memberikan latar belakang yang lebih gelap pada tombol tindakan utama untuk teks dengan kontras yang lebih tinggi, sehingga tombol tersebut terlihat sedikit lebih dipromosikan.

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

Screenshot yang menampilkan tombol setelah gaya sebelumnya diterapkan.

Membuat varian

Untuk bersenang-senang, dan karena praktis, saya memilih untuk menunjukkan cara membuat beberapa varian. Salah satu varian sangat cerah, mirip dengan tampilan tombol utama. Varian lain berukuran besar. Varian terakhir memiliki ikon yang diisi gradien.

Tombol cerah

Untuk mendapatkan gaya tombol ini, saya mengganti properti dasar secara langsung dengan warna biru. Meskipun cepat dan mudah, tindakan ini menghapus properti adaptif dan terlihat sama dalam tema terang dan gelap.

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

Tombol kustom ditampilkan dalam warna terang dan gelap. Warnanya biru cerah seperti tombol tindakan utama pada umumnya.

Tombol besar

Gaya tombol ini dicapai dengan mengubah properti kustom --_size. Padding dan elemen ruang lainnya relatif terhadap ukuran ini, yang diskalakan secara proporsional dengan ukuran baru.

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

Tombol besar ditampilkan di samping tombol kustom, sekitar 150 kali lebih besar.

Tombol ikon

Efek ikon ini tidak ada hubungannya dengan gaya tombol kita, tetapi menunjukkan cara mencapainya hanya dengan beberapa properti CSS, dan seberapa baik tombol menangani ikon yang bukan SVG inline.

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

Tombol dengan ikon ditampilkan dalam tema terang dan gelap.

Kesimpulan

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda‽ 🙂

Mari kita diversifikasi pendekatan kita dan pelajari semua cara untuk membangun di web.

Buat demo, tweet linknya kepada saya, dan saya akan menambahkannya ke bagian remix komunitas di bawah.

Remix komunitas

Belum ada apa-apa di sini.

Resource