Bu nümunə yalnız generatorun idarəetmə elementlərindən istifadə edir. Yuxarıdakı şəkillər redaktorun skrinşotları deyil, adi HTML düymələrinə tətbiq edilmiş faktiki yüklənmiş üslub cədvəllərini göstərir.
Signature ilə başlayın
CSS Düymə Generatorunu açın. Şablonlarda Everyday kolleksiyasından Signature-ı seçin. Düymə mətnini “Get started” olaraq təyin edin. Kod sahəsində Sinif adını cta-button olaraq təyin edin.
Şablon standart və hover üslublarını əvəz edir, lakin etiketiniz və sinif adınız qalır. Ətraflı düzəlişlər etməzdən əvvəl başlanğıc nöqtənizi seçin.
Sinif adı CSS qaydalarını HTML düymənizə bağlayır. Generator dəstəklənməyən simvolları təmizləyir; əlaqəsiz elementləri üslublandırmamaq üçün qısa və fərqli bir ad istifadə edin.
Qradiyentli oval düymə yaradın
Redaktə vəziyyətini Default-da saxlayın. Mətndə System sans, Şrift ölçüsü 18 px və Çəki Bold seçin. Ağ mətn rəngini, normal üslubu, mərkəzləşdirilmiş düzləndirməni və sətir hündürlüyünü 1.4 saxlayın.
Doldurmada Linear gradient seçin. Aşağıdakı iki rəngdən və bucaqdan istifadə edin. Üfüqi boşluğu 32 px və Şaquli boşluğu 16 px olaraq təyin edin. Formada Bütün küncləri birləşdir-i aktiv saxlayın və Künc radiusunu 100 px olaraq təyin edin. Sərhəd eni 0 px qalır.
Kölgədə Qutu kölgəsini aktiv saxlayın. Üfüqi ofset 0 px, şaquli ofset 8 px, bulanıqlıq 24 px, yayılma −4 px, rəng #460BD8 və şəffaflıq 32% istifadə edin. Daxili kölgə və Mətn kölgəsini söndürün.
Boşluq mətnin ətrafındakı sahəni dəyişir. Künc radiusu konturu dəyişir. Böyük radius etiketi genişləndirmədən bu oval formanı yaradır.
Hover-ə öz yanaşmanızı verin
Redaktə vəziyyətini Hover-ə keçirin. Doldurmada Arxa fon rəngini #33099E və İkinci rəngi #6D20BF olaraq dəyişin. Qradiyent bucağını 135°-də saxlayın. Kölgədə Şaquli ofseti 10 px və Bulanıqlığı 28 px olaraq dəyişin. Digər parametrləri dəyişməz saxlayın.
Hər bir vəziyyəti yoxlamaq üçün kətanın Default, Hover və Active düymələrindən istifadə edin. Həmçinin önizləmə düyməsinin üzərinə gələ və ya basa bilərsiniz. Kənarını və kölgəsini nəzərdən keçirmək üçün kətanı açıq və tünd rənglər arasında dəyişin.
Redaktə vəziyyəti hansı üslubları dəyişəcəyinizi seçir. Kətan vəziyyəti yalnız önizlədiyiniz şeyi dəyişir. İstirahət görünüşünü tənzimləməzdən əvvəl Default redaktəyə qayıdın.
Default ilə uyğun gələn hover xüsusiyyətləri sonrakı default düzəlişləri izləyir. Bir hover xüsusiyyətini fərdiləşdirdikdən sonra o, müstəqil qalır. Əsas üslubu dəyişdikdən sonra hər iki vəziyyəti yenidən yoxlayın.
Səhifənizdə ixrac edin və sınaqdan keçirin
CSS tabını seçin və Copy CSS istifadə edin və ya cta-button.css-ni saxlamaq üçün Download seçin. HTML tabını seçin və uyğun düymə işarəsini kopyalayın. HTML eyni sinif adını və type="button" olan düyməni ehtiva edir.
CSS-u üslub cədvəlinizə əlavə edin və ya yüklənmiş faylı səhifənizdən əlaqələndirin. HTML-i düymənin aid olduğu yerə yerləşdirin. İki ixrac birlikdə işləyir: HTML düyməsi təkbaşına öz üslubunu ehtiva etmir.
Səhifəni açın və onun default, hover, klaviatura fokus və basılmış vəziyyətlərini sınaqdan keçirin. İxrac fokus-görünən konturu, kiçik aktiv hərəkəti və azaldılmış hərəkət qaydasını ehtiva edir. Ətrafdakı üslublarınız və quraşdırılmış şriftləriniz hələ də nəticəyə təsir edə bilər.
Yaradılmış düymə üslublandırılmış idarəetmə elementidir. Onun klik davranışını layihənizdə əlaqələndirin; onu formaya əlavə edərkən düzgün düymə növündən istifadə edin.
cta-button.css
Yüklənmiş fayl adı sinif adını izləyir.
Ümumi suallar
CSS çərçivəsinə ehtiyacım varmı?
Xeyr. Çıxış standart CSS və sadə HTML düyməsidir. CSS-ni öz üslub cədvəlinizə yapışdırın və düymədə uyğun sinifdən istifadə edin.
Download HTML-u da saxlayırmı?
Download sinif adından sonra adlandırılmış .css faylını saxlayır. Düymə işarəsini HTML tabından ayrıca kopyalayın.
Hər küncə fərqli radius verə bilərəmmi?
Bəli. Formada Bütün küncləri birləşdir-i söndürün, sonra Yuxarı sol, Yuxarı sağ, Aşağı sağ və Aşağı sol küncləri müstəqil olaraq təyin edin. Bu nümunə oval forma üçün onları birləşdirilmiş saxlayır.
Dizaynım növbəti dəfə burada qalacaqmı?
Studiya cari qaralamanı bu brauzerin yerli yaddaşında saxlamağa çalışır. Bu, hesab və ya cihazlararası ehtiyat nüsxə deyil. Brauzer parametrləri, sayt məlumatlarının təmizlənməsi və ya Sıfırlama onu silə və ya əvəz edə bilər, ona görə də saxlamaq istədiyiniz işi ixrac edin.
Düyməm serverə yüklənirmi?
Üslubun önizlənməsi və CSS/HTML generasiyası brauzerinizdə işləyir. Redaktor ixracı yaratmaq üçün düymə mətninizi və ya üslub qaralamanızı serverə yükləmir.
Növbəti düymənizə öz üslubunuzu verin.
Başlanğıc nöqtəsini seçin, detalları tənzimləyin və kodu layihənizə daxil edin.