CSS Buton Oluşturucu
CSS buton oluşturucu, görsel ayarları yapıştırmaya hazır tek bir kurala çevirir. Bir butona yalnızca background-color, color, padding ve border-radius gerekir; kenarlık isteğe bağlıdır ve padding önce dikey, sonra yatay yazılır. Örnek: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff yazıldığında, etiketi 5,17:1 ile WCAG AA düzeyini geçen yuvarlatılmış mavi bir buton elde edilir.
Önizleme
Erişilebilirlik kontrolü
Özelleştir
Hızlı Şablonlar
Oluşturulan Kod
Popüler Araçlar
CSS Buton Oluşturucu Hakkında
CSS Buton Oluşturucu, birkaç sürgü ve renk seçicisini bir butonun gerçekten ihtiyaç duyduğu tek CSS kuralına dönüştürür. Etiketi, arka plan ve yazı rengini, yazı boyutu ile kalınlığını, yatay ve dikey iç boşluğu, köşe yarıçapını, kenarlık kalınlığı ile rengini ve dört gölge derinliğinden birini siz belirlersiniz; isteğe bağlı ikinci bir renk düz dolguyu 135 derecelik doğrusal bir gradyana çevirir. Önizleme denetimlerin üstünde durur ve değerlerinizle biçimlenmiş gerçek bir HTML butonudur; sayfanızda çizileceği boyutta görünür, yani onayladığınız şey yayına aldığınız şeydir.
Çıktıyı süs olmaktan çıkarıp kullanılır kılan iki şey var. Birincisi, kod bölümünün iki sekmesi vardır: bir stil dosyasına bırakacağınız, :hover, :active, :focus-visible ve :disabled kurallarıyla birlikte yeniden kullanılabilir bir .btn sınıfı ve dış CSS'i temizleyen sayfa oluşturucular, CMS blokları ile e-posta şablonları için her şeyin style özniteliğine satır içi yazıldığı aynı button öğesi. İkincisi, erişilebilirlik paneli renk çiftini WCAG 2.2'ye göre ölçer ve kontrast oranını AAA, AA ya da başarısız kararıyla bildirir; yazı boyutu ve kalınlığı uygun olduğunda büyük metin eşiklerine geçer. Ayrıca çizilen yüksekliği de bildirir: dikey iç boşluğun iki katı, artı kenarlığın iki katı, artı yazı boyutunun 1,2 katı - yani ekrandaki butonun tam olarak bildirilen yükseklikte olması için kuralın sabitlediği satır yüksekliği - ve bunu 2.5.8 ile 2.5.5 ölçütlerindeki 24 x 24 ve 44 x 44 CSS pikselik hedeflerle karşılaştırır.
Gradyan her iki durağa göre denetlenir ve iki orandan kötü olanı gösterilir. Sekiz şablon - Birincil, Tehlike, Başarı, Çerçeveli, Hap şekli, Degrade, Sade ve Neon - bir varış noktası değil, başlangıç noktasıdır: birine tıklayın, sonra sürgüleri çekmeye devam edin. Hiçbir renk, etiket ya da sürgü konumu hiçbir yere gönderilmez; kontrast hesabı, önizleme ve kod sayfanın kendi içinde üretilir, bu yüzden oran butonu yeniden çizen tuş vuruşuyla aynı anda güncellenir. Kopyaladığınız şey tek bir sınıftır: kurulacak bir çerçeve, bir derleme adımı ve çalışan bir betik yoktur.
Kullanım alanları
Nasıl kullanılır
Butonda görünmesini istediğiniz metni Buton Metni alanına yazın, ardından Arka Plan ve yazı renklerini renk kutucuklarıyla ya da yanlarındaki alanlara hex kodu yazarak belirleyin.
Butona biçim vermek için yazı tipi boyutu, yatay dolgu, dikey dolgu ve Kenar Yuvarlaklığı kaydırıcılarını sürükleyin; çerçeveli bir görünüm için Kenarlık Kalınlığı'nı artırıp bir Kenarlık Rengi seçin.
Yazı kalınlığı olarak Normal, Orta, Yarı kalın veya Kalın'ı; Gölge olarak Hiçbiri, Küçük, Orta veya Büyük'ü seçin.
Arka planı çapraz, iki renkli bir gradyana dönüştürmek için Gradyan'ı işaretleyin ve ikinci rengi seçin.
Üzerinde çalışmayı sürdürebileceğiniz hazır bir stil yüklemek için Birincil, Çerçeveli, Hap şekli, Degrade, Sade veya Neon gibi bir Hızlı Şablonlar kartına tıklayın.
Önizleme panelindeki canlı butonu kontrol edin, çıktı sekmesini CSS ya da HTML + CSS'e geçirin ve kod kutusundaki kopyalama simgesine basın.
Profesyonel İpuçları
- Her şeyden önce yazı boyutunu ayarlayın. Etiket son boyutuna geldiğinde iç boşluğu ve köşe yarıçapını değerlendirmek çok daha kolaydır, yükseklik göstergesi de (2 x dikey iç boşluk + 2 x kenarlık kalınlığı + 1,2 x yazı boyutu) onunla birlikte değişir.
- Önce bir şablon yükleyin, sonra ince ayar yapın. Çerçeveli ve Sade şablonları sıfırdan büyük bir kenarlık kalınlığıyla başlar; ikincil butona giden en kısa yol budur.
- Onaltılık kodları renk seçicinin içinde aramak yerine her örneğin yanındaki alana yazın; önizleme ve kontrast oranı her tuş vuruşunda güncellenir.
- AA kontrastı her yazı boyutunda gereklidir; değişen tek şey eşiktir: normal metinde 4,5:1, etiket 24px’e ya da kalın 18,66px’e ulaştığında 3:1. 3:1’lik bir çift parlak bir ekranda iyi görünüp açık havada okunmaz hale gelebilir; bu yüzden düşük eşiği hedef değil tavan sayın.
- Gradyanlar her iki durağa göre denetlenir ve kötü olan oran gösterilir; yalnızca bir uç kalıyorsa bütün butonu yeniden renklendirmek yerine o durağı değiştirin.
Sorun Giderme
Kopyaladığım CSS sayfamda görünür bir etki yaratmıyor.
Sınıf eziliyor ya da hiç uygulanmamış. Öğenin class="btn" taşıdığını doğrulayın, kendi stil dosyanızı çerçeve CSS'inden sonra yükleyin ve geliştirici araçlarında Styles panelini açın: üzeri çizili bir bildirim, başka bir seçicinin özgüllük veya sıra nedeniyle kazandığı anlamına gelir.
Gradyan düz görünüyor ya da hiç çıkmıyor.
Gradyan bir arka plan resmidir, arka plan rengi değil. Aracın background-color yerine background: linear-gradient(...) üretmesi için Degrade kutusunu işaretleyin. Yine de görünmüyorsa aynı öğe üzerinde daha sonra gelen bir background kısayol özelliği ya da bir background-image arayın: kısayol, background-image değerini none'a döndürür ve gradyanı siler. Sonradan gelen bir background-color onu gizleyemez, çünkü CSS Backgrounds 3 rengi arka plan resimlerinin altına boyar.
Kontrast rozeti renklerin kaldığını söylüyor ama buton bana okunaklı görünüyor.
Kontrast, bir rengin ne kadar canlı hissettirdiğine göre değil, bağıl parlaklığa göre ölçülür. #f59e0b ile beyaz metin gibi orta ton çiftleri parlak görünmelerine karşın 2:1 dolayında kalır. Arka planı koyulaştırın ya da etiketi neredeyse siyaha çevirin; oran siz yazarken güncellenir.
Sık Sorulan Sorular
Sınıf için tek bir kural yazın ve altı bildirim verin: background-color, color, font-size, font-weight, padding ve border-radius. box-shadow ile kenarlığı yalnızca tasarım gerektiriyorsa ekleyin. Oluşturucu tam olarak bu kuralı sizin için yazar: sürgüleri çekin, canlı önizlemeye bakın, sonra CSS sekmesindeki .btn bloğunu stil dosyanıza kopyalayın.
CSS sekmesi, bir stil dosyasına yapıştıracağınız, durum kurallarıyla birlikte yeniden kullanılabilir bir .btn sınıfı verir; o tek bloğu değiştirdiğinizde sitedeki bütün butonlar değişir. HTML + CSS sekmesi ise aynı bildirimlerin style özniteliğine satır içi yazıldığı tek bir button öğesi verir; sayfa oluşturucuların, CMS bloklarının ve e-posta şablonlarının ihtiyacı budur, çünkü dış stil dosyalarını temizlerler. Tıklama başka bir adrese götürüyorsa onu href'li bir bağlantıya çevirin.
Kenar yarıçapı kaydırıcısını yukarı çekin. 8px civarında çoğu arayüzün kullandığı yumuşatılmış dikdörtgeni elde edersiniz; buton yüksekliğinin yarısını aştığınızda köşeler birleşip hap biçimini alır. Varsayılan 16px yazı ve 12px dikey iç boşlukla buton 43px yüksekliğindedir, bu yüzden yaklaşık 22'nin üzerindeki her yarıçap zaten tam yuvarlak görünür; elle yazılan CSS'teki 999px de aynı anlama gelir.
Evet. Metin ya da arka plan rengini her değiştirdiğinizde WCAG kontrast oranını yeniden hesaplar ve AAA, AA veya başarısız sonucunu gösterir. Normal metin AA için 4,5:1, AAA için 7:1 ister; 24px veya kalın 18,66px metin büyük sayılır ve yalnızca 3:1 ile 4,5:1 gerektirir. Gradyan dolgular her iki renk durağına göre ölçülür.
Boyut paneli çizilen yüksekliği dikey iç boşluğun iki katı, artı kenarlık kalınlığının iki katı, artı yazı boyutunun 1,2 katı olarak bildirir; 1,2 oluşturucunun kurala sabitlediği satır yüksekliğidir, bu yüzden sayı hemen yukarıda çizilen butonla örtüşür. WCAG 2.2'nin 2.5.8 ölçütü 24 x 24 CSS pikselik bir hedef ister, 2.5.5 ise bunu 44 x 44'e çıkarır. 12px dikey iç boşluklu 16px yazı 43px verir ve asgariyi rahatça aşar.
Tıklama bulunduğunuz sayfada iş yapıyorsa button kullanın: form göndermek, iletişim kutusu açmak, JavaScript çalıştırmak. Varsayılan olarak odaklanabilir, Enter ve Boşluk ile tetiklenir ve disabled özniteliğini destekler. Tıklama başka bir adrese götürüyorsa href'li bağlantı kullanın; böylece orta tuşla tıklama ve «yeni sekmede aç» çalışmaya devam eder. İkisi de aynı .btn sınıfını taşıyabilir.
Üretilen CSS zaten .btn:hover ve .btn:active içerir. «Focus ve disabled durumlarını koda ekle» kutusunu işaretli bırakırsanız ayrıca 2px kaydırmalı 3px'lik bir dış çizgiyle .btn:focus-visible ve yarı saydamlıkta cursor: not-allowed taşıyan .btn:disabled gelir. Görünür bir karşılık koymadan odak çizgisini asla silmeyin, yoksa klavyeyle gezinenler nerede olduklarını tümüyle kaybeder.
Evet. Çıktı lisanssız, atıf zorunluluğu olmayan ve çalışma zamanı bağımlılığı bulunmayan sade CSS'tir; ilk satırdaki künye yorumu silinebilir. Yazdığınız hiçbir şey de yüklenmez: önizleme, üretilen kod ve kontrast hesabı bu sayfanın içinde JavaScript ile yapılır, dolayısıyla renkleriniz ve etiketleriniz hiçbir sunucuya ulaşmaz.
Neredeyse her zaman devralınan stiller sorumludur. Bir çerçeve sıfırlaması, üst öğeden gelen bir font-family, genel bir button kuralı veya daha yüksek özgüllükte bir seçici yapıştırdığınız sınıfı ezebilir. Kendi stil dosyanızı çerçeve CSS'inden sonra yükleyin, .btn sınıfını tek bir öğede tutun ve geliştirici araçlarındaki Styles panelini okuyun: üzeri çizili bir bildirim hangi seçicinin kazandığını tam olarak söyler.