Renk uyarlanabilir, duyarlı ve erişilebilir <button>
bileşenleri oluşturmaya ilişkin temel bir genel bakış.
Bu yayında, renge uyarlanabilir, duyarlı ve erişilebilir bir <button>
öğesinin nasıl oluşturulacağıyla ilgili düşüncelerimi paylaşmak istiyorum.
Demoyu deneyin ve kaynağı görüntüleyin
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel bakış
<button>
öğesi kullanıcı etkileşimi için oluşturulmuştur. click
etkinliği klavye, fare, dokunma, ses ve daha pek çok yöntemle tetiklenir ve zamanlamayla ilgili akıllı kurallar bulunur. Ayrıca her tarayıcıda bazı varsayılan stiller bulunduğundan bunları herhangi bir özelleştirme olmadan doğrudan kullanabilirsiniz. Tarayıcı tarafından sağlanan açık ve koyu renkli düğmeleri de etkinleştirmek için color-scheme
aracını kullanın.
Ayrıca, her biri önceki Codepen yerleştirmesinde gösterilen farklı düğme türleri vardır. Türü olmayan <button>
, gönderme türüne geçerek <form>
içinde olmaya uyarlanır.
<!-- 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">
Bu ayki GUI Yarışmasında, her düğmenin amacını görsel olarak farklılaştırmasına yardımcı olacak stiller sunulacak. Sıfırlama düğmeleri, yıkıcı olduğundan uyarı renkleri içerir. Gönder düğmeleri ise normal düğmelere kıyasla biraz daha tanıtılmış olarak mavi vurgu metnine sahip olur.
Düğmelerde CSS'nin stil için kullandığı sözde sınıflar da bulunur. Bu sınıflar, düğmenin dokunuşunu özelleştirmek için CSS kancaları sağlar: Düğmenin fareyle üzerine geldiğinde :hover
, fare veya klavyeye basıldığında kullanmak için :active
ve yardımcı teknoloji stiline yardımcı olması için :focus
ya da :focus-visible
.
button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
Markup
HTML spesifikasyonunun sağladığı düğme türlerine ek olarak, simge içeren bir düğme ve btn-custom
özel sınıfına sahip bir düğme ekledim.
<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">
Daha sonra, her bir düğme, test amacıyla bir formun içine yerleştirilir. Bu şekilde, gönder düğmesi olarak çalışan varsayılan düğme için stillerin uygun şekilde güncellenmesini sağlayabilirim. Ayrıca, her ikisinin de eşit derecede iyi çalışmasını sağlamak için simge stratejisini satır içi SVG'den maskeli SVG'ye geçiriyorum.
<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>
Kombinasyon matrisi bu noktada oldukça zorlayıcıdır. Düğme türleri, sözde sınıflar ve bir biçimin içinde veya dışında 20'den fazla düğme kombinasyonu bulunur. CSS'nin her birini açıkça ifade etmemize yardımcı olması güzel.
Erişilebilirlik
Düğme öğelerine doğal olarak erişilebilir, ancak yaygın birkaç iyileştirme vardır.
Birlikte üzerine gelin ve odaklanın
:hover
ve :focus
öğelerini :is()
işlevsel sözde seçici ile gruplandırmayı seviyorum. Bu, arayüzlerimin her zaman klavye ve yardımcı teknoloji stillerini
değerlendirmesini sağlıyor.
button:is(:hover, :focus) {
…
}
Etkileşimli odak halkası
Odak halkasını klavye ve yardımcı teknoloji kullanıcıları için canlandırmak istiyorum. Ben bunu yalnızca düğme etkin değilken düğmeden dış çizgiyi 5 piksel çevirerek yapıyorum. Bu, basıldığında odak halkasının düğme boyutuna geri küçülmesine neden olan bir efekt oluşturur.
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Renk kontrastının geçirilmesini sağlama
Renk kontrastı açısından dikkat edilmesi gereken, açık ve koyu renklerde en az dört farklı renk kombinasyonu vardır: düğme, gönder düğmesi, sıfırla düğmesi ve devre dışı bırakılan düğme. Tüm puanlarını tek seferde incelemek ve göstermek için VisBug burada kullanılır:
Görmeyen kişilerden simgeler gizleniyor
Bir simge düğmesi oluştururken simge, düğme metni için görsel destek sağlamalıdır. Bu aynı zamanda simgenin, görme kaybı olan biri için değerli olmadığı anlamına da gelir. Neyse ki tarayıcı, öğeleri ekran okuyucu teknolojisinden gizleyerek görme kaybı yaşayan kişilerin dekoratif düğme resimleriyle ilgilenmelerini önleyebiliyor:
<button>
<svg … aria-hidden="true">...</svg>
Icon Button
</button>
Stiller
Bir sonraki bölümde, düğmenin uyarlanabilir stillerini yönetmek için özel bir özellik sistemi kuracağım. Bu özel özelliklerle öğeleri seçmeye ve görünümlerini özelleştirmeye başlayabilirim.
Uyarlanabilir özel mülk stratejisi
Bu GUI Meydan Okuması'nda kullanılan özel mülk stratejisi, renk şeması oluşturmak için kullanılan stratejiye çok benzer. Uyarlanabilir açık ve koyu renk sisteminde, her tema için özel bir özellik tanımlanır ve buna göre adlandırılır. Daha sonra temanın mevcut değerini barındırmak için tek bir özel özellik kullanılır ve bir CSS mülküne atanır. Daha sonra, tek özel özellik farklı bir değerle güncellenebilir ve ardından düğme stili güncellenir.
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);
}
}
En sevdiğim yanı, açık ve koyu temaların açıklayıcı ve net olmasıdır. Dolaylı ve soyutlama, artık tek "reaktif" özellik olan --_bg
özel özelliğine aktarılır; --_bg-light
ve --_bg-dark
ise statiktir. Ayrıca açık temanın varsayılan tema olduğu ve koyu temanın yalnızca koşullu olarak uygulandığı da açıktır.
Tasarım tutarlılığına hazırlanma
Paylaşılan seçici
Aşağıdaki seçici, çeşitli düğme türlerinin tümünü hedeflemek için kullanılır ve başta biraz kafa karıştırıcıdır. :where()
kullanıldığı için düğmenin özelleştirilmesi belirli bir durum gerektirmez. Düğmeler genellikle alternatif senaryolara uyarlanır ve :where()
seçici, görevlerin kolay olmasını sağlar. :where()
içinde, her bir düğme türü seçilir. ::file-selector-button
düğmesi de dahil olmak üzere, :is()
veya :where()
içinde kullanılamaz.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
…
}
Tüm özel özellikler, bu seçicinin içinde yer alır. Şimdi tüm özel özellikleri inceleyin. Bu düğmede kullanılan birçok özel özellik vardır. Her bir grubu ilerledikçe anlatacağım, sonra da bölümün sonunda karanlık ve azaltılmış bağlamları paylaşacağım.
Düğme vurgu rengi
Gönder düğmeleri ve simgeleri, kendinizi daha iyi göstermek için harika bir yerdir:
--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);
Düğme metni rengi
Düğme metin renkleri beyaz veya siyah değildir, hsl()
kullanılarak ve 210
tonuna bağlı olarak --_accent
ürününün daha koyu veya açık renkli versiyonlarıdır:
--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);
Düğme arka plan rengi
Düğme arka planları, açık tema düğmeleri dışında aynı hsl()
desenini izler. Bu düğmeler, yüzeylerinin kullanıcıya yakın bir yerde veya diğer yüzeylerin önünde görünmesini sağlamak için beyaza ayarlanır:
--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);
Düğme arka planı iyi durumda
Bu arka plan rengi, bir yüzeyin diğer yüzeylerin arkasında görünmesini sağlamak içindir ve dosya girişinin arka planı açısından yararlıdır:
--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);
Düğme dolgusu
Düğmedeki metnin etrafındaki boşluk, yazı tipi boyutuyla göreli bir uzunluk olan ch
birimi kullanılarak yapılır. Bu durum, büyük düğmeler font-size
ve düğme ölçeğini orantılı olarak artırabildiğinde kritik hale gelir:
--_padding-inline: 1.75ch;
--_padding-block: .75ch;
Düğme kenarlığı
Düğme kenarlığı yarıçapı, dosya girişinin diğer düğmelerle eşleşebilmesi için özel bir özellikte saklanıyor. Kenarlık renkleri, yerleşik uyarlanabilir renk sistemine uyar:
--_border-radius: .5ch;
--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);
Düğmenin fareyle üzerine gelindiğinde vurgulama efekti
Bu özellikler, etkileşim üzerine geçiş için bir boyut özelliği oluşturur ve vurgu rengi uyarlanabilir renk sistemini izler. Bunların nasıl etkileşime geçtiğini bu yazının ilerleyen bölümlerinde ele alacağız. Ancak son olarak, bunların box-shadow
etkisi için kullanılması:
--_highlight-size: 0;
--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);
Düğme metni gölgesi
Her düğmenin ince bir metin gölgesi stili vardır. Bu, metnin düğmenin üzerine yerleştirilmesine yardımcı olarak okunabilirliği iyileştirir ve sunuma güzel bir zenginlik katar.
--_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);
Düğme simgesi
Simgeler, yine göreli uzunluk ch
birimi sayesinde iki karakter büyüklüğünde olur. Bu da simgenin düğme metniyle orantılı olarak ölçeklenmesine yardımcı olur. Simge rengi, uyarlanabilir ve tema içi renk için --_accent-color
üzerinde etkili olur.
--_icon-size: 2ch;
--_icon-color: var(--_accent);
Düğme gölgesi
Gölgelerin ışığa ve koyuluğa düzgün bir şekilde uyum sağlaması için hem renklerini hem de opaklıklarını değiştirmeleri gerekir. Açık tema gölgeleri, üzerine bindirilen yüzey rengine doğru incelikli ve tonlamalı olmaları durumunda en iyi sonucu verir. Yüzey renklerinin daha koyu renkli olması için koyu tema gölgelerinin daha koyu ve daha doygun olması gerekir.
--_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);
Uyarlanabilir renkler ve güçlü özelliklerle iki derin gölge oluşturabilirim:
--_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%));
Ayrıca, düğmelere biraz 3D bir görünüm vermek için 1px
kutu gölgesi illüzyon oluşturur:
--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);
Düğme geçişleri
Uyarlanabilir renk desenini izleyerek, tasarım sistemi seçeneklerini saptamak için iki statik özellik oluştururum:
--_transition-motion-reduce: ;
--_transition-motion-ok:
box-shadow 145ms ease,
outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);
Seçicideki tüm mülkler bir arada
: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); }
Koyu tema uyarlamaları
Koyu tema özellikleri ayarlandığında -light
ve -dark
statik özellik deseninin değeri netleşir:
@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);
}
}
Bu hem yazıları iyi okuyor hem de bu özel düğmeleri kullananlar, kullanıcı tercihlerine uyum sağlayacaklarından emin bir şekilde çıplak öğeleri kullanabiliyor.
Azaltılmış hareket uyarlamaları
Ziyaret eden bu kullanıcı için hareket uygunsa --_transition
özelliğini var(--_transition-motion-ok)
adlı kullanıcıya atayın:
@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);
}
}
Birkaç paylaşılan stil
Düğmelerin ve girişlerin yazı tiplerinin, sayfa yazı tiplerinin geri kalanıyla eşleşecek şekilde inherit
değerine ayarlanması gerekir. Aksi takdirde stil tarayıcı tarafından belirlenir. Bu, letter-spacing
için de geçerlidir. line-height
değerini 1.5
olarak ayarlamak, metne yukarıda ve altında biraz boşluk bırakmak için sinemaskop boyutunu ayarlar:
: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);
}
Düğmelerin stil özelliklerini ayarlama
Seçici düzenlemesi
input[type="file"]
seçicisi, girişin düğme parçası olmadığı için ::file-selector-button
sözde öğesi olduğu için listeden input[type="file"]
öğesini çıkardım:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
}
İmleç ve dokunma ayarları
İlk olarak imleci, pointer
stiline göre biçimlendiriyorum. Bu stil, düğmenin fare kullanıcılarına etkileşimli olduğunu belirtmesine yardımcı olur. Daha sonra, tıklamaların beklemek ve olası bir çift tıklamayı gözlemlemek zorunda kalmamasını sağlamak için touch-action: manipulation
ekliyorum. Böylece düğmeler daha hızlı görünür:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
cursor: pointer;
touch-action: manipulation;
}
Renkler ve kenarlıklar
Ardından, daha önce oluşturduğumuz uyarlanabilir özel özelliklerden bazılarını kullanarak yazı tipi boyutunu, arka plan, metin ve kenarlık renklerini özelleştiriyorum:
: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);
}
Gölgeler
Düğmelere harika teknikler uygulanmıştır. text-shadow
açık ve koyu renklere uyarlanabilir. Bu sayede, arka planın üzerinde güzel bir şekilde duran düğme metninin hoş ve hoş bir görünümünü oluşturur. box-shadow
için üç gölge atanır. Birincisi (--_shadow-2
), normal bir kutu gölgesidir.
İkinci gölge, düğmenin biraz yukarıdaymış gibi görünmesini sağlayan, göze çarpmayan bir gölgedir. Son gölge, başlangıçta 0 boyutunda olacak şekilde fareyle üzerine gelme vurgulama içindir, ancak daha sonra bir boyut verilecek ve düğmeden büyüyeceği için geçişi yapılacaktır.
: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);
}
Düzen
Düğmeye bir flexbox düzeni, özellikle de içeriğine uyacak bir inline-flex
düzeni verdim. Daha sonra, metni ortalıyorum ve alt öğeleri dikey ve yatay olarak ortaya hizalıyorum. Bu, simgelerin ve diğer düğme
öğelerinin düzgün bir şekilde hizalanmasına yardımcı olur.
: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;
}
Boşluk
Düğme aralıklarında, kardeş öğelerin dokunmasını engellemek için gap
ve dolgu için mantıksal özellikleri kullandım. Böylece düğme aralığı tüm metin düzenlerinde çalışır.
: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);
}
Dokunma ve fare kullanıcı deneyimi
Bu sonraki bölüm çoğunlukla mobil cihazlarda dokunmatik kullanıcılar içindir. İlk user-select
özelliği tüm kullanıcılar içindir; düğme metnini vurgulayan metinler olmasını engeller. Bu durum, genellikle dokunmatik cihazlarda bir düğmeye dokunup basılı tutulduğunda ve işletim sistemi düğme metnini vurguladığında fark edilebilir.
Genellikle bunun yerleşik uygulamalardaki düğmelerle ilgili kullanıcı deneyimi
olmadığını anladım. Bu yüzden, user-select
öğesini yok şeklinde ayarlayarak devre dışı bırakıyorum. Vurgu renklerine dokunun
(-webkit-tap-highlight-color
)
ve işletim sistemi içerik menüleri
(-webkit-touch-callout
)
Genel düğmelerin kullanıcı beklentileriyle pek uyumlu olmayan web merkezli diğer düğme özellikleridir. Bu nedenle düğmelerin
kullanımıyla tam olarak uyuşmayan diğer düğme özellikleridir.
: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;
}
Geçişler
Uyarlanabilir --_transition
değişkeni, transition özelliğine atanır:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
transition: var(--_transition);
}
Kullanıcı aktif olarak bastırmadığında, fareyle üzerine gelindiğinde düğmenin içinden çıkacak hoş bir odak görünümü sağlamak için gölge vurgu boyutunu ayarlayın:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
):where(:not(:active):hover) {
--_highlight-size: .5rem;
}
Odaklanıldığında, odak dış çizgisinin düğmeden uzaklığını artırın. Bu sayede, düğmenin içinden güzel bir odak görünümü de elde edebilirsiniz.
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Simgeler
Simgeleri işleme açısından, seçicide doğrudan SVG alt öğeleri veya data-icon
özel özelliğine sahip öğeler için ek bir :where()
seçici bulunur. Simge boyutu, satır içi ve blok mantıksal özellikleri kullanılarak özel özellikle ayarlanır. Fırça rengi ve text-shadow
ile eşleşecek bir drop-shadow
ayarlandı. flex-shrink
, 0
olarak ayarlandığından simge hiçbir zaman
sıkıştırılmaz. Son olarak, çizgili simgeleri seçiyorum ve burada bu stilleri fill: none
ve round
satır sınırları ve çizgi birleşimleriyle atıyorum:
: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;
}
Gönder düğmelerini özelleştirme
Gönder düğmelerinin biraz öne çıkan bir görünüme sahip olmasını istedim. Bunu, düğmelerin metin rengini vurgu rengi yaparak başlattım:
:where(
[type="submit"],
form button:not([type],[disabled])
) {
--_text: var(--_accent);
}
Sıfırlama düğmelerini özelleştir
Sıfırlama düğmelerinde kullanıcıları, yıkıcı olabilecek davranışlarına karşı uyaracak yerleşik uyarı işaretleri bulundurmak istiyordum. Ayrıca açık tema düğmesini, koyu temadan daha çok kırmızı vurgularla şekillendirmeyi seçtim. Özelleştirme, uygun açık veya koyu temel rengin değiştirilmesiyle yapılır ve düğme, stili günceller:
: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%);
}
Ayrıca odak noktasının dış çizgisinin kırmızı vurgusuyla eşleşmesinin de güzel olacağını düşündüm. Metin rengi, koyu kırmızıyı açık kırmızıya dönüştürür. Dış çizgi renginin currentColor
anahtar kelimesiyle eşleşmesini sağlıyorum:
:where([type="reset"]):focus-visible {
outline-color: currentColor;
}
Devre dışı düğmeleri özelleştirin
Devre dışı bırakılan düğmelerin etkisini azaltarak düğmenin daha az etkin görünmesi için devre dışı bırakılan düğmelerin renk kontrastının zayıf olması sık karşılaşılan bir durumdur. Her bir renk grubunu test ettim ve Geliştirici Araçları veya VisBug'da geçen puana kadar HSL açıklık değerini döndürerek başarılı olduklarından emin oldum.
: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);
}
Dosya giriş düğmelerini özelleştirme
Dosya giriş düğmesi, bir yayılma alanı ve düğme için bir kapsayıcıdır. CSS, giriş kapsayıcısını ve iç içe düğmeyi biraz biçimlendirebilir, ancak kapsamı biraz farklı kılacaktır. Kapsayıcıya max-inline-size
verilir ve bu nedenle olması gerekenden daha büyük olmaz. Ancak inline-size: 100%
, kapsayıcıları olduğundan daha küçük şekilde küçültüp sığdırmasına izin verir. Arka plan rengi, diğer yüzeylerden daha koyu olan uyarlanabilir bir renge ayarlandığında dosya seçici düğmesinin arkasına bakar.
:where(input[type="file"]) {
inline-size: 100%;
max-inline-size: max-content;
background-color: var(--_input-well);
}
Diğer düğme stilleri tarafından üzerine yazılmayan, tarayıcı tarafından sağlanan stillerin kaldırılması için dosya seçici düğmesi ve giriş türü düğmelerine özel olarak appearance: none
verilmiştir.
:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
appearance: none;
}
Son olarak, kapsam metnini düğmeden uzağa itmek için düğmenin inline-end
öğesine kenar boşluğu eklenir.
:where(input[type="file"])::file-selector-button {
margin-inline-end: var(--_padding-inline);
}
Özel koyu tema istisnaları
Yüksek kontrastlı metin için birincil işlem düğmelerine daha koyu bir arka plan verdim. Böylece biraz daha tanıtılmış bir görünüm elde ettim.
@media (prefers-color-scheme: dark) {
:where(
[type="submit"],
[type="reset"],
[disabled],
form button:not([type="button"])
) {
--_bg: var(--_input-well);
}
}
Varyant oluşturma
Eğlenmek için ve pratik olduğu için birkaç varyantın nasıl oluşturulacağını göstermeyi seçtim. Varyantlardan biri, birincil düğmelerin genellikle görünmesine benzeyen çok canlı. Başka bir varyant büyük. Son varyant, gradyanla dolu bir simgeye sahiptir.
Canlı düğme
Bu düğme stilini elde etmek için taban malzemelerin üzerine doğrudan mavi renkleri yazdım. Bu işlem hızlı ve kolay bir işlem olsa da uyarlanabilir sahne unsurlarını kaldırıyor ve hem açık hem de koyu temalarda aynı görünüyor.
.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%);
}
Büyük düğme
Bu düğme stili, --_size
özel özelliğinin değiştirilmesiyle elde edilir.
Dolgu ve diğer boşluk öğeleri bu boyuta göre belirlenir ve yeni boyutla orantılı olarak ölçeklenir.
.btn-large {
--_size: 1.5rem;
}
Simge düğmesi
Bu simge efektinin düğme stillerimizle hiçbir ilgisi yoktur, ancak bunu yalnızca birkaç CSS özelliğiyle nasıl uygulayacağınızı ve düğmenin satır içi SVG olmayan simgeleri ne kadar iyi işlediğini göstermektedir.
[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));
}
Sonuç
Nasıl yaptığımı artık bildiğine göre siz de nasıl yapardınız? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim.
Bir demo oluşturun, bana tweet atın bağlantıları, aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.
Topluluk remiksleri
Henüz burada görülecek bir şey yok.
Kaynaklar
- GitHub'daki kaynak kodu