CSS Buton Oluşturucu

Üretilen kod neleri içerir?

HTML, görünür etiketi bir span içinde bulunan gerçek bir <button type="button"> öğesi kullanır. CSS altı yararlı görünümü kapsar:

• Varsayılan: Normal, bekleme görünümü
• Üzerine gelme: İşaretçi kullanan aygıtlar için
• Klavye odağı: :focus-visible ile
• Etkin: Denetim basılı tutulurken
• Devre dışı: Yerel disabled özelliğiyle
• Yükleniyor: aria-busy="true" ile

Butonun ne zaman devre dışı veya meşgul olacağına uygulamanız karar verir. Oluşturucu yalnızca görünüm kurallarını sağlar; uygulama durumu oluşturmaz ve tıklama eylemi eklemez.

Kontrast yönlendirmesi kontrol sağlar, sertifika değil

Düzenleyici temel renk, gradyanın diğer ucu, üzerine gelme ve etkin durum renkleri arasındaki en düşük metin kontrastını hesaplar. Normal metin için 4,5:1 hedefini kullanır. Ayrıca odak çerçevesini açık renkli önizleme yüzeyiyle karşılaştırır ve metin dışı hedef olarak 3:1 oranını kullanır.

Bu değerler sık rastlanan sorunları yakalamaya yardımcı olur, ancak tamamlanan sayfada buton farklı bir yüzeye yerleştirilebilir. Odak ve kenarlık kontrastını gerçek düzende yeniden kontrol edin. Devre dışı denetimler düşük opaklıkla gösterilir; amaçları açık değilse yakınlarında anlaşılır bir açıklama bulunmalıdır.

Hedef boyutu ve hareket

Dışa aktarılan kural satır içi ve blok boyutunu en az 44 px olarak zorunlu kılar. Bu, pek çok dokunmatik arayüz için rahat bir hedeftir ve WCAG 2.2 Başarı Ölçütü 2.5.8’deki 24 CSS px alt sınırından büyüktür. Son üründe düzen, boşluk, istisnalar ve platform yönergeleri yine dikkate alınmalıdır.

Kullanıcı azaltılmış hareket istediğinde üzerine gelme ve basma hareketi kaldırılır. Meşgul durumunun görünür kalması için yükleniyor göstergesi kaybolmaz, yalnızca yavaşlar.

Güvenli çıktı sınırları

Görünür etiket normalleştirilir, 120 grafem kümesiyle sınırlandırılır, görünmez yön denetim karakterlerinden arındırılır ve kod parçasıyla indirilen dosyada HTML olarak güvenli biçimde kodlanır. Renkler altı basamaklı onaltılık değer olmalıdır. Her sayısal ayar yuvarlanır ve denetimin yanında gösterilen aralığa sabitlenir.

Tam düzenleyici tarayıcı belleğinde çalışır. İsteğe bağlı dört sayfalı akışta sürümlenmiş tasarım geçerli sekme için sessionStorage içinde tutulur. Etiket ve tasarım değerleri akış URL’lerine eklenmez ve Livewire üzerinden gönderilmez.

Yükleniyor durumunu kullanma

Meşgul özniteliğini uygulama kodundan ekleyip kaldırın:

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Kaydediliyor</span>
</button>

aria-busy, bir güncellemenin sürdüğünü bildirir. Yinelenen etkinleştirmeyi önlemek gerekiyorsa disabled da ekleyin. İşlem tamamlandığında iki özniteliği de kaldırın ve önemli başarı ya da hata iletisini uygun bir durum bölgesine taşıyın.