Düğme bileşeni oluşturma

Renge uyarlanabilen, duyarlı ve erişilebilir <button> bileşenlerinin nasıl oluşturulacağına dair temel bir genel bakış.

Adam Argyle

Bu gönderide, renge uyarlanabilir bir reklam oluşturmakla ilgili düşüncelerimi paylaşmak istiyorum. duyarlı ve erişilebilir <button> öğesi. Demoyu deneyin ve şu sayfayı görüntüleyin: kaynak

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Genel Bakış

İlgili içeriği oluşturmak için kullanılan <button> öğesi, kullanıcı etkileşimi için oluşturulmuştur. click etkinliği klavyeden tetikleniyor, fare, dokunma, ses ve diğer özelliklerle ilgili akıllı kurallarla zamanlama hakkında daha fazla bilgi edinin. Ayrıca birinci taraf her tarayıcıda bazı varsayılan stillerle çalışır. Böylece, bunları doğrudan özelleştirebilirsiniz. Etkinleştirmek için color-scheme öğesini kullanın tarafından sağlanan açık ve koyu renkli düğmelere de entegre edilebilir.

Ayrıca farklı türlerde düğmeler, her biri önceki Codepen yerleştirmesinde gösterilir. Tür içermeyen bir <button> gönderme türüne göre değişiklik yaparak <form> içinde kalmaya uyum sağlar.

<!-- 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üğme, amaçlarını görsel olarak ayırt etmenize yardımcı olacak stiller alacak. Sıfırla düğmeler zararlı oldukları için uyarı renkleri kullanabilir ve düğmeler mavi vurgulu metin alır ve böylece normalden biraz daha yüksek görünürlüğe sahiptir düğmelerini kullanın.

Düğmeler için sözde sınıflar da bulunur için kullanılacak kod snippet'idir. Bu sınıflar, düğmenin tarzı: :hover için fareyi düğmenin üzerine getirdiğimde, Fare kullanıldığında için :active klavye tuşuna basın ve :focus veya :focus-visible .

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

Brüt kar

HTML spesifikasyonu tarafından sağlanan düğme türlerine ek olarak, btn-custom özel sınıfını içeren bir simge ve düğme.

<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, test için her düğme bir formun içine yerleştirilir. Bu şekilde proje sırasında Stiller, varsayılan düğme için uygun şekilde güncellenir. Varsayılan düğme gönder düğmesi. Ayrıca, simge stratejisini satır içi SVG'den maskelenmiş SVG'ye geçiriyorum. her ikisinin de eşit derecede iyi çalışmasını sağlamak.

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

Kombinasyonların matrisi bu noktada oldukça korkutucudur. Ara düğmesi sanal sınıfların, bir formun içinde veya dışında olmanın 20'den fazla düğme kombinasyonlarını sağlayabilir. CSS'nin her bir ayrıntıyı anlamamıza yardımcı olması iyidir. net bir şekilde!

Erişilebilirlik

Düğme öğeleri doğal olarak erişilebilir durumdadır ancak birkaç yaygın öğe unutmayın.

Fareyle üzerine gelin ve birlikte odaklanın

:hover ve :focus öğelerini :is() işleviyle birlikte gruplandırmayı seviyorum yapay seçici. Bu şekilde arayüzlerimde her zaman klavyeyi dikkate alabiliyorum ve yardımcı teknoloji stilleri.

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

Etkileşimli odak halkası

Odak halkasını klavye ve yardımcı teknoloji kullanıcıları için animasyonla göstermek istiyorum. İ bunu, dış çizgiyi düğmeden 5 piksel uzağa doğru hareket ettirerek yapabilirsiniz. Ancak bu, düğme etkin olmadığında Bu işlem, odak halkasını oluşturan bir efekt oluşturur basıldığında düğme boyutuna küçültür.

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

Geçişli renk kontrastını sağlama

Açık ve koyu renk kombinasyonlarında, en az dört farklı renk kombinasyonu renk kontrastını göz önünde bulundurmak gerekir: düğme, gönder düğmesi, sıfırla düğmesi ve devre dışı düğmesi. VisBug, şu amaçlarla kullanılır: Tüm puanlarını tek seferde inceleyip gösterme:

Göremeyen kişilerden simgeleri gizleme

Bir simge düğmesi oluştururken simge, düğmenin konumuna görsel destek sağlamalıdır. düğme metni. Bu, simgenin gören kişiler için değerli olmadığı anlamına da gelir. kaybetmezsiniz. Neyse ki tarayıcı, öğeleri ekran okuyucudan gizlemenin bir yolunu sunuyor Bu sayede, görme engelli kişilerin dekoratif düğmelerle uğraşmaması için teknolojiden yararlanıldı. görseller:

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

ziyaret edin.

Stiller

Bu sonraki bölümde, ilk olarak site yönetimi için özel bir mülk sistemi düğmenin uyarlanabilir stillerini ayarlamalıdır. Bu özel özelliklerle ve görünümlerini özelleştirebilirsiniz.

Uyarlanabilir özel mülk stratejisi

Bu GUI Yarışmasında kullanılan özel özellik stratejisi, renk şeması oluştururken kullanın. Örneğin, açık ve koyu renklerle uyumlu hale getirildiğinde, her tema için özel bir özellik uygun şekilde tanımlanıp adlandırılır. Daha sonra, temanın geçerli değerine sahip olur ve bir CSS mülküne atanır. Daha sonra, single özel özellik farklı bir değerle güncellenip düğmeyi güncellenebilir stiline sahip.

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

Açık ve koyu temanın açıklayıcı ve net olması hoşuma gidiyor. İlgili içeriği oluşturmak için kullanılan dolaylı ve soyutlama --_bg özel özelliğine aktarılır. Şu anda "reaktif" durumda olan tek mülk; --_bg-light ve --_bg-dark statik. Ayrıca, varsayılan temanın açık tema olduğunu ve koyu renk yalnızca koşullu olarak uygulanır.

Tasarım tutarlılığı için hazırlık

Paylaşılan seçici

Aşağıdaki seçici tüm farklı düğme türlerini hedeflemek için kullanılır ve zorlayıcı olabilir. :where() Bu nedenle, düğmenin özelleştirilmesi herhangi bir ayrıntı gerektirmez. Düğmeler çoğu zaman uyarlandığını gösterir. :where() seçici, bu görevin kolay. :where() içinde her düğme türü seçilir. Bu düğme şunları içerir: ::file-selector-button; bu kullanılıyor :is() veya :where() içinde.

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

Tüm özel özelliklerin kapsamı bu seçicinin içinde belirlenir. İnceleme süresi tüm özel özellikleri kontrol edin! Bu alanda kullanılan çok sayıda özel nitelik, düğmesini tıklayın. İlerledikçe her grubu açıklayacağım, sonra da karanlık ve azaltılmış hareketli bağlamlar ekledik.

Düğme vurgu rengi

Gönder düğmeleri ve simgeler, çarpıcı renkler için mükemmel bir seçenektir:

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

Düğme metni rengi

Düğme metni renkleri beyaz veya siyah değildir, daha koyu veya daha açık renklidir / --_accent kullanılıyor hsl() ve 210 tonuna uyun:

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

Düğme arka plan rengi

Açık tema hariç düğme arka planları aynı hsl() kalıbını kullanıyor yüzeyleri düğmenin yakınında görünmelerini sağlayacak biçimde, beyaz renkte veya diğer yüzeylerin önünde gösterilebilir:

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

Düğme arka planı

Bu arka plan rengi, bir yüzeyin diğer yüzeylerin arkasında görünmesini sağlamak içindir. dosya girişinin arka planı için kullanışlı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, ch yazı tipi boyutuna göreceli bir uzunluk belirtir. Bu, proje başlatma belgesinde düğmelerin değeri font-size ve düğme ölçeklerini artırıyor orantılı olarak:

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

Düğme kenarlığı

Düğme kenarlığı yarıçapı, dosya girişinin kaydedilebilmesi için özel bir özelliğe sabitlenir. diğer düğmelerle eşleştirin. Kenarlık renkleri, belirlenen uyarlanabilir renge uyar sistem:

--_border-radius: .5ch;

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

Düğmeyle üzerine gelerek vurgulama efekti

Bu özellikler, etkileşimde geçiş için bir boyut özelliği oluşturur ve vurgu rengi uyarlanabilir renk sistemine uyar. Bunların nasıl bu yayının ilerleyen kısımlarında etkileşim kurabilir, ancak nihai olarak bunlar box-shadow amacıyla kullanılır efekt:

--_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 ekranın üst kısmına daha rahat okunmasını sağlıyor ve sunumuna güzel bir görünüm katıyor.

--_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, ch birimi göreli uzunluğu sayesinde iki karakter uzunluğundadır Böylece, simge, düğme metniyle orantılı olarak ölçeklendirilir. İlgili içeriği oluşturmak için kullanılan simge rengi uyarlanabilir ve tema içi bir tema için --_accent-color özelliğinden yararlanır rengi.

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

Düğme gölgesi

Gölgelerin ışığa ve karanlığa uygun şekilde uyum sağlayabilmesi için hem gölge renk ve opaklık. Açık tema gölgeleri, yumuşak ve tonlu olduğunda en iyi sonucu verir yüzey rengine doğru örtebilir. Koyu tema gölgeleri daha koyu ve daha doygunluğu artırmaktır. Böylece, daha koyu yüzey renklerine sahip olabilirler.

--_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üçlerle iki derin gölgeyi bir araya getirebilirim:

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

Bununla birlikte, düğmelere hafif 3D bir görünüm vermek için 1px kutu gölgesi şu illüzyonu yaratır:

--_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 renkler kalıbını izleyerek tasarım sistemi seçeneklerini basılı tutun:

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

-light ve -dark statik aksesuar kalıbının değeri, koyu tema öğeleri ayarlandı:

@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 uygun olacaklarından emin olarak sabit donanımlar oluşturun.

Azaltılmış hareket adaptasyonları

Ziyaret eden bu kullanıcıda hareket sorunu yoksa kullanıcıya --_transition atayın 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);
  }
}

Birkaç paylaşılan stil

Düğmelerin ve girişlerin yazı tiplerinin inherit olarak ayarlanması gerekir. Böylece geri kalan yazı tipleri; Aksi takdirde, bunların stili tarayıcı tarafından belirlenir. Bu ayrıca letter-spacing için geçerlidir. line-height, 1.5 olarak ayarlandığında sinemaskop ayarlanır boyutunu ayarlamak için metnin üzerinde ve altında biraz boşluk bırakın:

: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 stilini belirleme

Seçici ayarlaması

input[type="file"] seçicisi girişin düğme parçası değil, ::file-selector-button sanal öğesi, dolayısıyla input[type="file"] öğesini kaldırdım listeden:

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

İmleç ve dokunma ayarlamaları

İlk olarak imlecin stilini pointer stiline ayarlayacağım. Bu stil, düğmenin etkileşimli bir hale getirmek için de kullanılır. Sonra şuna touch-action: manipulation ekliyorum: tıklamaların beklemesine ve potansiyel bir çift tıklamayı gözlemlemesine gerek kalmaz ve bu durum, düğmeler daha hızlıdı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

Sonra yazı tipi boyutunu, arka plan, metni ve kenarlık renklerini özelleştiriyorum. şu uyarlanabilir özel mülklerden oluşur:

: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 bazı etkili teknikler uygulanmış. İlgili içeriği oluşturmak için kullanılan text-shadow açık ve koyu renge uyum sağlayabilir, düğmenin hoş ve ince bir görünümünü yaratır üstünde güzel bir şekilde duruyor. box-shadow üç gölge atanmış. İlki olan --_shadow-2, normal bir kutu gölgesidir. İkinci gölge ise düğmenin göze çarpmasını sağlayan ve göze çarpmayan bir şey gibi görünür. biraz kafa yormuş olabilir. Son gölge, başlangıçta üzerine gelindiğinde görünen vurgulamadır. bir boyutu vardır, ancak daha sonra bir boyut verilir ve gerçekten çok değerli.

: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 verdim. özellikle, içeriğine uyacak bir inline-flex düzeni. Ortaya koyuluyorum. altları dikey ve yatay olarak center. Bu, simgelerin ve diğer düğme öğelerini düzgün bir şekilde hizalayın.

: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ığı için Kardeşleri korumak için gap ve mantıksal olarak yaygın özellikleri'ni tıklayın Boşluklar tüm metin düzenlerinde kullanılabilir.

: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

Bir sonraki bölüm, çoğunlukla mobil cihazlardaki dokunmatik kullanıcılar içindir. İlk mülk, user-select tüm kullanıcılar içindir; düğme metnini vurgulamayı önler. Bu çoğunlukla bir düğmeye dokunulduğunda ve basılı tutulduğunda dokunmatik cihazlarda fark edilebilir sistemin, düğme metnini vurgulaması.

Çoğunlukla bunun yerleşik düğmelerle ilgili kullanıcı deneyiminden Bu yüzden user-select ürününü "yok" olarak ayarlayarak ayarı devre dışı bırakıyorum. Vurgu renklerine dokunun (-webkit-tap-highlight-color) ve işletim sistemi bağlam menüleri (-webkit-touch-callout) genel ile uyumlu olmayan diğer çok web merkezli düğme özellikleridir bu yüzden onları da kaldırıyorum.

: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ği:

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

  transition: var(--_transition);
}

Fareyle üzerine gelindiğinde, kullanıcı aktif bir şekilde basmıyorken gölge vurgusunu ayarlayın göze çarpan güzel bir odak görünümü verecek şekilde düğme:

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

Odaklandıktan sonra, odaklamanın düğmeden uzaklaşmasını artırarak düğmenin içinden büyümüş görünen hoş bir odak görünümü:

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

Simgeler

İşleme simgeleri için seçicide doğrudan SVG için bir :where() seçici bulunmaktadır. alt öğeler veya data-icon özel özelliğine sahip öğeler. Simge boyutu ayarlandı satır içi ve blok mantıksal özellikleri kullanarak özel özellikle değiştirin. Çizgi rengi emin olmak için drop-shadow text-shadow ile eşleşecek şekilde ayarlayın. flex-shrink, 0 olarak ayarlandığı için simge asla sıkışık. Son olarak, çizgili simgeleri seçip bu stilleri buraya fill: none ve round satır sınırı ve çizgi birleştirme sayısı:

: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 görünüşünde hafif bir tanıtım olmasını istiyordum ve Bunun için düğmelerin metin rengini vurgu rengi yapın:

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

Sıfırlama düğmelerini özelleştir

Sıfırlama düğmelerinin, kullanıcıları şu konuda uyaracak yerleşik uyarı işaretlerine sahip olmasını istedim: yıkıcı olabilecek davranışlarını belirlememize yardımcı olur. Açık temanın stilini de seçtim koyu temadan daha fazla kırmızı vurguya sahip düğme. Özelleştirme, arkadaki uygun açık veya koyu rengi değiştirdiğinizde, düğme stili güncelleyin:

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

Odaktaki dış çizginin rengin de vurguyla eşleşmesinin daha iyi olacağını düşündüm. kırmızı. Metin rengi, koyu kırmızıdan açık kırmızıya uyarlanır. Dış çizgi rengi yapıyorum bunu anahtar kelime ile eşleştir currentColor:

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

Devre dışı bırakılan düğmeleri özelleştir

İşlem sırasında devre dışı bırakılan düğmelerin renk kontrastının düşük olması devre dışı bırakılmış düğmeyi daha az etkin görünecek şekilde sadeleştirmeyi deneyin. Her birini test ettim emin olmak için, HSL ışıklandırması değerini puanının iletilmesini kolaylaştırır.

: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şi düğmesi, bir aralık ve düğme için bir kapsayıcıdır. CSS şunları yapabilir: iç içe yerleştirilmiş düğmenin stilini belirlemek için biraz bahsedeceğim. Kapsayıcıya max-inline-size izni verildi. Böylece, boyut şundan daha büyük olmayacaktır: gerekir, inline-size: 100% kendiliğinden küçülmeye ve sığmasına izin verir daha küçük container'lar oluşturabilirsiniz. Arka plan rengi uyarlanabilir bir renge ayarlandı diğer yüzeylerden daha koyu renkli olduğundan 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);
}

Dosya seçici düğmesi ve giriş türü düğmeleri, özellikle Tarayıcı tarafından sağlanıp sağlanmayan stilleri kaldırmak için appearance: none diğer düğme stillerinin üzerine yazılır.

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

Son olarak, yayılma metnini aktarmak için düğmenin inline-end kısmına kenar boşluğu eklenir oluşturarak yeni bir alan yaratabilirsiniz.

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

Özel koyu tema istisnaları

Daha yüksek kontrast için birincil işlem düğmelerine daha koyu bir arka plan verdim Böylece bunları biraz daha öne çıkarmış bir görünüm elde etmiş olursunuz.

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

Varyant oluşturma

Hem eğlenmek hem de pratik olması için birkaç için de geçerlidir. Birincil düğmelerin çoğuna benzer şekilde, varyantlardan biri çok canlı. görün. Başka bir varyant büyük. Son varyantta gradyan dolgulu bir simge bulunur.

Canlı düğme

Bu düğme stilini elde etmek için temel aksesuarların üzerine doğrudan mavi renkle yazdım. renk. Bu hızlı ve kolay olmakla birlikte uyarlanabilir özellikleri ve görünümleri kaldırır hem açık hem de koyu temalarda aynı olabilir.

.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ği değiştirilerek elde edilir. Dolgu ve diğer alan öğeleri bu boyuta göre hesaplanır ve zaman içinde yeni boyutla orantılı olarak alırsınız.

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

Simge düğmesi

Bu simge efektinin düğme stillerimizle bir ilgisi yoktur, ancak yalnızca birkaç CSS özelliğiyle bunu nasıl başaracağınızı ve düğmenin satır içi SVG olmayan simgeleri işler.

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

Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂

Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim.

Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!

Topluluk remiksleri

Henüz burada görülecek bir şey yok.

Kaynaklar

• GitHub'da kaynak kodu