Ringkasan dasar tentang cara mem-build komponen <button>
yang adaptif warna, responsif, dan mudah diakses.
Dalam postingan ini, saya ingin berbagi pendapat tentang cara mem-build elemen <button>
adaptif, responsif, dan mudah diakses.
Coba demo dan lihat sumbernya
Jika Anda lebih suka video, berikut versi YouTube postingan ini:
Ringkasan
Elemen
<button>
dibuat untuk interaksi pengguna. Peristiwa click
dipicu dari keyboard,
mouse, sentuh, suara, dan lainnya, dengan aturan cerdas terkait
waktunya. Fitur ini juga dilengkapi dengan beberapa gaya default di setiap browser, sehingga Anda dapat menggunakannya langsung tanpa penyesuaian apa pun. Gunakan color-scheme
untuk memilih
tombol terang dan gelap yang disediakan browser.
Ada juga berbagai jenis tombol,
masing-masing ditunjukkan dalam penyematan Codepen sebelumnya. <button>
tanpa jenis akan
beradaptasi menjadi dalam <form>
, berubah menjadi jenis pengiriman.
<!-- 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 GUI Challenge bulan ini, setiap tombol akan mendapatkan gaya untuk membantu membedakan intent mereka secara visual. Tombol reset akan memiliki warna peringatan karena bersifat destruktif, dan tombol kirim akan mendapatkan teks aksen biru sehingga tampak sedikit lebih dipromosikan daripada tombol biasa.
![Pratinjau kumpulan akhir semua jenis tombol, yang ditampilkan dalam bentuk dan bukan dalam formulir, dengan tambahan yang bagus untuk tombol ikon dan tombol yang disesuaikan.](https://web.dev/static/articles/building/a-button-component/image/preview-the-final-set-a-f0edd66ff9463.png?authuser=6&hl=id)
Tombol juga memiliki class pseudo
yang dapat digunakan CSS untuk penataan gaya. Class ini menyediakan hook CSS untuk menyesuaikan
nuansa tombol: :hover
untuk saat mouse berada di atas tombol,
:active
saat mouse
atau keyboard menekan, dan
:focus
atau
:focus-visible
untuk membantu dalam penataan gaya teknologi pendukung.
button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
![Pratinjau kumpulan akhir semua jenis tombol dalam tema gelap.](https://web.dev/static/articles/building/a-button-component/image/preview-the-final-set-a-65448775506f6.png?authuser=6&hl=id)
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 cara ini, saya bisa memastikan gaya diperbarui dengan tepat untuk tombol default, yang berperilaku sebagai tombol kirim. Saya juga mengganti strategi ikon, dari SVG inline ke SVG yang disamarkan, untuk memastikan keduanya berfungsi dengan baik.
<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>
Matriks kombinasi cukup banyak untuk saat ini. Di antara jenis tombol, class pseudo, dan berada di dalam atau di luar suatu bentuk, ada lebih dari 20 kombinasi tombol. Bagusnya CSS dapat membantu kita menguraikannya dengan jelas.
Aksesibilitas
Elemen tombol dapat diakses secara alami, tetapi ada beberapa peningkatan umum.
Arahkan kursor dan fokus bersama
Saya suka mengelompokkan :hover
dan :focus
bersama dengan pemilih pseudo
fungsi :is()
. Hal ini membantu memastikan antarmuka saya selalu
mempertimbangkan gaya {i>keyboard<i} dan teknologi pendukung.
button:is(:hover, :focus) {
…
}
Lingkaran fokus interaktif
Saya suka menganimasikan lingkaran fokus untuk pengguna keyboard dan teknologi pendukung. Saya melakukannya dengan menganimasikan outline dari tombol sebesar 5 px, tetapi hanya saat tombol tidak aktif. Tindakan ini akan menciptakan efek yang membuat cincin 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 antara terang dan gelap yang perlu dipertimbangkan kontras warnanya: 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 untuk teks tombol. Ini juga berarti ikon tidak berguna bagi seseorang yang kehilangan penglihatan. Untungnya, browser menyediakan cara untuk menyembunyikan item dari teknologi pembaca layar sehingga orang-orang dengan gangguan penglihatan tidak terganggu dengan gambar tombol dekoratif:
<button>
<svg … aria-hidden="true">...</svg>
Icon Button
</button>
![Chrome DevTools menampilkan pohon aksesibilitas untuk tombol. Pohon mengabaikan gambar tombol karena aria-tersembunyi ke true.](https://web.dev/static/articles/building/a-button-component/image/chrome-devtools-showing-4f9517c567e4c.png?authuser=6&hl=id)
Gaya
Di bagian selanjutnya, pertama-tama saya membuat sistem properti khusus untuk mengelola gaya adaptif tombol. Dengan properti khusus itu saya bisa mulai memilih elemen dan menyesuaikan tampilannya.
Strategi properti kustom adaptif
Strategi properti kustom yang digunakan dalam GUI Challenge ini sangat mirip dengan yang digunakan dalam membuat 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. Kemudian, satu properti khusus dapat diperbarui 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 suka adalah tema terang dan gelap bersifat deklaratif dan jelas. Pengalihan
dan abstraksi dialihkan ke properti khusus --_bg
,
yang kini menjadi satu-satunya properti "reaktif"; --_bg-light
dan --_bg-dark
bersifat
statis. Anda juga dapat memahami bahwa tema terang adalah tema default dan
gelap hanya diterapkan secara bersyarat.
Mempersiapkan konsistensi desain
Pemilih bersama
Pemilih berikut digunakan untuk menargetkan semua berbagai jenis tombol dan
pada awalnya agak kewalahan. :where()
digunakan sehingga penyesuaian tombol tidak memerlukan kekhususan. Tombol sering
diadaptasi untuk skenario alternatif dan pemilih :where()
memastikan bahwa tugas
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 khusus! Ada beberapa properti khusus yang digunakan untuk tombol ini. Saya akan menjelaskan setiap kelompok, lalu membagikan konteks gerakan yang gelap dan tereduksi di akhir bagian.
Warna aksen tombol
Tombol dan ikon {i>Submit<i} adalah tempat yang bagus untuk menampilkan semburat warna:
--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);
Warna tombol teks
Warna teks tombol tidak putih atau hitam. Warna tersebut adalah versi --_accent
yang lebih gelap atau lebih terang menggunakan hsl()
dan tetap menggunakan hue 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 untuk tombol tema
terang, yang disetel ke putih sehingga permukaannya membuatnya muncul di dekat
pengguna, atau di depan platform lain:
--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);
Latar belakang tombol dengan baik
Warna latar belakang ini digunakan untuk membuat platform muncul di belakang platform lain, yang 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
Spasi di sekitar teks dalam tombol dilakukan menggunakan unit
ch
, yang panjangnya relatif terhadap ukuran font. Hal ini menjadi sangat penting saat tombol
besar hanya dapat meningkatkan font-size
dan skala tombol
secara proporsional:
--_padding-inline: 1.75ch;
--_padding-block: .75ch;
Batas tombol
Radius batas tombol disimpan di dalam properti khusus 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 tombol saat kursor diarahkan
Properti ini menetapkan properti ukuran untuk bertransisi pada interaksi, dan
warna sorotan mengikuti sistem warna adaptif. Kami akan membahas interaksi keduanya nanti dalam postingan ini, tetapi pada akhirnya interaksi tersebut 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. Ini membantu teks berada di atas tombol, meningkatkan keterbacaan dan menambah 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 adalah ukuran dua karakter berkat unit ch
panjang relatif, yang akan membantu ikon diskalakan secara proporsional dengan teks tombol. Warna
ikon mengandalkan --_accent-color
untuk warna adaptif dan
sesuai tema.
--_icon-size: 2ch;
--_icon-color: var(--_accent);
Bayangan tombol
Agar bayangan dapat beradaptasi dengan baik dengan terang dan gelap, mereka harus mengubah warna dan opasitasnya. Bayangan tema terang paling baik digunakan jika halus dan diberi warna pada warna permukaan yang ditempatkan di atas. Bayangan tema gelap harus lebih gelap dan lebih tersaturasi agar dapat menempatkan warna permukaan 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 menyusun 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 memberi tombol tampilan yang sedikit 3D, box-shadow 1px
akan 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 di 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); }
Adaptasi tema gelap
Nilai pola properti statis -light
dan -dark
menjadi jelas saat
properti tema gelap disetel:
@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);
}
}
Hal ini tidak hanya membuatnya terbaca dengan baik, tetapi konsumen tombol kustom ini dapat menggunakan properti kosong dengan keyakinan bahwa tombol tersebut akan beradaptasi dengan sesuai dengan preferensi pengguna.
Mengurangi adaptasi gerakan
Jika gerakan diperbolehkan untuk 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
Font tombol dan input harus disetel ke inherit
agar cocok dengan
font halaman lainnya; jika tidak, font tersebut akan ditata oleh browser. Hal ini juga
berlaku untuk letter-spacing
. Menyetel line-height
ke 1.5
akan menetapkan ukuran kotak
huruf untuk memberi teks beberapa ruang di atas dan di bawah:
: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);
}
Menata gaya tombol
Penyesuaian pemilih
Pemilih input[type="file"]
bukan bagian tombol input, elemen semu ::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 itu interaktif. Kemudian, saya menambahkan touch-action: manipulation
agar
klik tidak perlu menunggu dan mengamati kemungkinan klik dua kali, 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
Berikutnya, 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);
}
Bayangan
Tombol-tombol tersebut menerapkan
beberapa teknik bagus. text-shadow
adaptif terhadap terang dan gelap, sehingga menciptakan tampilan teks tombol
yang halus dan menyenangkan yang berada di atas latar belakang. Untuk
box-shadow
,
tiga bayangan ditetapkan. Yang pertama, --_shadow-2
, adalah bayangan kotak reguler.
Bayangan kedua merupakan trik mata yang membuat tombol tampak
sedikit miring. Bayangan terakhir adalah untuk sorotan pengarahan kursor, yang awalnya
berukuran 0, tetapi akan diberi ukuran nanti dan ditransisikan sehingga tampak
membesar 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);
}
Tata Letak
Saya memberi tombol tersebut tata letak flexbox,
khususnya tata letak inline-flex
yang sesuai dengan kontennya. Kemudian, saya menempatkan
teks di tengah, serta meratakan turunan secara vertikal dan horizontal ke
tengah. Ini akan membantu ikon dan elemen
tombol lainnya untuk menyelaraskan 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;
}
Spasi
Untuk spasi tombol, saya menggunakan
gap
agar saudara
tidak menyentuh 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);
}
UX sentuh dan mouse
Bagian berikutnya terutama untuk pengguna sentuh di perangkat seluler. Properti
pertama,
user-select
,
adalah untuk semua pengguna; properti ini mencegah teks menyoroti teks tombol. Hal ini sebagian besar
terlihat pada perangkat sentuh saat tombol diketuk dan ditahan dan sistem
operasi menyoroti teks tombol tersebut.
Saya biasanya menemukan bahwa ini bukanlah pengalaman pengguna dengan tombol di aplikasi
bawaan, jadi saya menonaktifkannya dengan menyetel user-select
ke tidak ada. Ketuk warna sorotan
(-webkit-tap-highlight-color
)
dan menu konteks sistem operasi
(-webkit-touch-callout
)
adalah fitur tombol yang sangat berfokus pada web lainnya yang tidak sesuai dengan harapan pengguna
tombol umum, jadi saya juga akan 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 transisi:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
transition: var(--_transition);
}
Saat mengarahkan kursor, sementara pengguna tidak menekan secara aktif, sesuaikan ukuran sorotan bayangan untuk memberikan tampilan fokus yang bagus dan tampak membesar dari dalam tombol:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
):where(:not(:active):hover) {
--_highlight-size: .5rem;
}
Setelah difokuskan, tingkatkan offset garis batas fokus dari tombol, yang juga 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()
yang ditambahkan untuk turunan SVG
langsung atau elemen dengan atribut khusus data-icon
. Ukuran ikon disetel
dengan properti khusus menggunakan properti logis blok dan inline. Warna goresan
ditetapkan, serta
drop-shadow
agar cocok dengan text-shadow
. flex-shrink
disetel ke 0
sehingga ikon tidak pernah
diciutkan. Terakhir, saya memilih ikon bergaris dan menetapkan gaya tersebut di sini dengan
batas garis fill: none
dan round
serta gabungan 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;
}
Menyesuaikan tombol kirim
Saya ingin tombol kirim memiliki tampilan yang sedikit dipromosikan, dan saya melakukannya dengan membuat warna teks tombol menjadi warna aksen:
:where(
[type="submit"],
form button:not([type],[disabled])
) {
--_text: var(--_accent);
}
Sesuaikan tombol reset
Saya ingin tombol reset memiliki beberapa tanda peringatan bawaan untuk memberi tahu pengguna tentang perilaku yang berpotensi merusak. Saya juga memilih untuk memberi gaya pada 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 akan lebih baik jika warna garis batas fokus disesuaikan dengan aksen
merah. Warna teks menyesuaikan warna merah gelap menjadi merah terang. Saya membuat warna garis batas cocok dengan kata kunci
currentColor
:
:where([type="reset"]):focus-visible {
outline-color: currentColor;
}
Sesuaikan tombol yang dinonaktifkan
Sangat umum bagi tombol yang dinonaktifkan memiliki kontras warna yang buruk selama upaya untuk menaklukkan tombol yang dinonaktifkan sehingga tampak kurang aktif. Saya menguji setiap set warna dan memastikannya lulus, dengan mendorong nilai kecerahan HSL hingga skor diteruskan 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);
}
Menyesuaikan tombol input file
Tombol input file adalah penampung untuk span dan tombol. CSS dapat sedikit menata gaya penampung input, serta tombol bertingkat, tetapi tidak dengan span. Penampung diberi max-inline-size
sehingga tidak akan membesar lebih besar dari
yang diperlukan, sementara inline-size: 100%
akan membiarkan dirinya sendiri menyusut dan menyesuaikan
penampung yang lebih kecil darinya. Warna latar belakang disetel ke warna adaptif
yang lebih gelap dari permukaan lain 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 diberikan secara khusus
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
menjauh dari tombol, sehingga menciptakan ruang.
:where(input[type="file"])::file-selector-button {
margin-inline-end: var(--_padding-inline);
}
Pengecualian tema gelap khusus
Saya memberi tombol tindakan utama latar belakang yang lebih gelap untuk teks dengan kontras yang lebih tinggi, sehingga memberinya tampilan yang sedikit lebih dipromosikan.
@media (prefers-color-scheme: dark) {
:where(
[type="submit"],
[type="reset"],
[disabled],
form button:not([type="button"])
) {
--_bg: var(--_input-well);
}
}
Membuat varian
Untuk bersenang-senang, dan karena kasus ini praktis, saya memilih untuk menunjukkan cara membuat beberapa varian. Satu varian sangat cerah, mirip dengan tampilan tombol utama. Varian lainnya besar. Varian terakhir memiliki ikon penuh gradien.
Tombol cerah
Untuk mencapai gaya tombol ini, saya mengganti properti dasar secara langsung dengan warna biru. Meskipun cepat dan mudah, cara 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 besar
Gaya tombol ini dicapai dengan memodifikasi properti khusus --_size
.
Padding dan elemen ruang lainnya relatif terhadap ukuran ini, yang diskalakan secara proporsional
dengan ukuran baru.
.btn-large {
--_size: 1.5rem;
}
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 tersebut menangani ikon yang tidak menggunakan 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));
}
Kesimpulan
Setelah Anda tahu cara saya melakukannya, bagaimana Anda‽ 🙂
Mari lakukan diversifikasi pendekatan dan pelajari semua cara untuk membangun di web.
Buat demo, link tweet me, dan saya akan menambahkannya ke bagian remix komunitas di bawah.
Remix komunitas
Belum ada apa-apa di sini.
Referensi
- Kode sumber di GitHub