Softonic

CSS Buton Oluşturucu

Adım 1 / 4 Buton metni

Buton metni

Düz metin bir etiket girin. HTML benzeri metin, üretilen kod parçasında güvenli biçimde kodlanır.

Bir buton tasarlayın ve kullanmadan önce varsayılan, üzerine gelme, klavye odağı, etkin, devre dışı ve yükleniyor durumlarını inceleyin. Düz ya da iki renkli gradyan dolgu, kenarlık, boşluk, köşe, gölge ve durum renklerini seçin. Oluşturucu buton etiketini güvenli biçimde kodlar, tasarımı tarayıcınızda tutar ve semantik HTML ile sınırlandırılmış CSS üretir.

CSS buton nasıl oluşturulur?

  1. 1

    Etiketi yazın

    Görünür buton adı için düz metin girin. HTML benzeri karakterler çalıştırılmaz, metin olarak korunur.

  2. 2

    Temel tasarımı ayarlayın

    Düz veya gradyan arka planı, metin ve kenarlık renklerini, boyutu, dolguyu, köşe yarıçapını ve gölgeyi seçin.

  3. 3

    Etkileşim durumlarını tanımlayın

    Üzerine gelme, etkin ve odak renkleriyle hareketlerini ayarlayın. Devre dışı ve yükleniyor kuralları otomatik eklenir.

  4. 4

    Uyarıları kontrol edin

    Dışa aktarmadan önce en düşük metin kontrastını, odak göstergesi kontrastını ve zorunlu minimum hedef boyutunu inceleyin.

  5. 5

    Kopyalayın veya indirin

    Güvenli HTML ve CSS kodunu birlikte kopyalayın ya da bağımsız UTF-8 HTML önizlemesini indirin.

Ü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 sunucularımıza 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.

Sık Sorulan Sorular

Hayır. Kontrast hesaplamaları, görünür bir odak kuralı, azaltılmış hareket desteği, semantik HTML ve 44 px minimum hedef sağlar. Uyumluluk; son sayfaya, çevreleyen renklere, içeriğe, davranışa ve testlere bağlıdır.

Hayır. Düzenleyici etiketi ve tasarımı tarayıcı belleğinde tutar. İsteğe bağlı çok sayfalı akış aynı sekmedeki oturum depolamasını kullanır; girilen değerleri URL’lere ya da sunucularımıza eklemez.

Gönderme, açma veya açıp kapatma gibi eylemler için buton doğrudur. Gezinme için gerçek bir href içeren bağlantı kullanın; bağlantının aynı görünümü paylaşması gerekiyorsa üretilen sınıfı ona uyarlayın.

Düzenleyici hatayı bildirir ve tam çıktıyı elle kopyalayabilmeniz için okunabilir bir metin alanında seçili bırakır. Başarı iletisini yalnızca Clipboard API tamamlandıktan sonra gösterir.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

EditorConfig Oluşturucu

Girinti, satır sonu ve karakter kümesi kurallarınızdan bir .editorconfig oluşturun, ardından deponuzdaki her dil için doğru bölümü ekleyin: Python, Go, YAML, Makefile ve daha fazlası.

Araç diğer dillerde mevcuttur