Düyməni vizual olaraq dizayn edin və onu veb saytınızda istifadə etmək üçün HTML və CSS əldə edin. Hazır şablondan başlayın, tipoqrafiyanı, rəngləri, formanı və kölgələri tənzimləyin, sonra ixrac etməzdən əvvəl qarşılıqlı əlaqə vəziyyətlərinə baxın.
Gündəlik, Klassik, Formalı, İfadəli, Qradiyent və Elit kolleksiyaları üzrə 44 şablonlarına göz atın. Hər bir şablon redaktə edə biləcəyiniz bir başlanğıc nöqtəsidir.
Şablonlar dizaynınıza necə təsir edir
Əvvəlcə seçin, sonra dəqiqləşdirin
Qalereyanı daraltmaq üçün Üslub kolleksiyasından istifadə edin. Şablon tətbiq etmək düymənin mətnini və sinif adını saxlayaraq həm standart, həm də hover üslublarını əvəz edir.
Sadə bərk dolğu, küncləri formalı, kəskin konturlu və ya daha dekorativ bir üslubu sınayın. Bir istiqamət tapdıqdan sonra detalların səhifənizə uyğun olması üçün digər tablardan istifadə edin.
Etiketi düzgün hiss etdirin
Düymə mətnini, şrift ailəsini, ölçüsünü, qalınlığını, boşluqları, sətir hündürlüyünü, düzləndirməni və mətn rəngini təyin edin. Siz işlədikcə etiketin yenilənməsini izləyin.
Mətni və boşluqları dəqiqləşdirin
Fəaliyyətə uyğun tipoqrafiya
Mətn şrift idarəetmələrini və ikinci Düymə mətni sahəsini ehtiva edir. Şrift ölçüsü 10-dan 80 pikselə qədər dəyişir; siyahıdakı ailələr ziyarətçinin cihazında mövcud olan şriftlərdən istifadə edir.
Fəaliyyəti təsvir edən qısa bir etiketdən istifadə edin. Dolğuda, üfüqi və şaquli boşluqlar şrift ölçüsünü dəyişmədən ətrafına boşluq əlavə edir. Daha uzun etiketləri düymənin istifadə olunacağı səhifədə yoxlayın.
Bərk və ya qradiyent dolğu seçin
Bir fon rəngindən istifadə edin və ya iki rəngi xətti qradiyentlə qarışdırın. Rəng seçiciləri və onaltılıq (hex) girişlər vizual və ya dəqiq işləməyə imkan verir.
Rəngləri və qradiyent istiqamətini təyin edin
İki rəng, bir aydın istiqamət
Dolğuda, İkinci rəngi və Qradiyent bucağını görmək üçün Dolğu üslubunu Xətti qradiyentə dəyişin. Bucaq 0-dan 360 dərəcəyə qədər dəyişir.
Onaltılıq sahələr tam altı rəqəmli rəngi və ya üç rəqəmli qısaltmanı qəbul edir. Ağ və ya rəngli etiketi qradiyentin hər iki ucunda sınaqdan keçirin; studiya mətn kontrastını avtomatik təsdiqləmir.
Konturu və dərinliyi idarə edin
Birləşdirilmiş və ya müstəqil küncləri, haşiyə enini və üslubunu, qutu kölgələrini və mətn kölgələrini tənzimləyin. Düyməyə kontekstinə uyğun bir forma verin.
Küncləri, haşiyələri və kölgələri kəşf edin
Kəskin düzbucaqlıdan yumşaq həb formasına qədər
Formada, bir ortaq radius üçün Bütün küncləri birləşdir seçimini aktiv saxlayın və ya hər küncü ayrı-ayrı təyin etmək üçün onu söndürün. Haşiyə üslublarına bərk, ştrixli, nöqtəli, cüt, daxili, xarici, qabarıq, çuxurlu və heç biri daxildir.
Kölgədə, üfüqi və şaquli ofsetləri, bulanıqlığı, rəngi və şəffaflığı təyin edin. Qutu kölgəsinin həmçinin yayılma və daxili keçid funksiyası var. Mətn kölgəsi ayrıdır, beləliklə düymənin konturunu dəyişmədən etiketə dərinlik əlavə edə bilərsiniz.
Qarşılıqlı əlaqəni də dizayn edin
Standart və Hover üslublarını ayrı-ayrılıqda redaktə edin. Standart, Hover və Aktiv görünüşləri nəzərdən keçirin, sonra düyməni açıq və tünd kətanlarda müqayisə edin.
Redaktə və önizləmə vəziyyətlərini anlayın
İki redaktə edilə bilən üslub, üç önizləmə vəziyyəti
Redaktə vəziyyəti idarəetmə elementlərinizin hansı üslubu dəyişəcəyini seçir. Kətan vəziyyəti düymələri yalnız önizləməni seçir. Önizləmənin üzərinə gəlmək və ya basmaq onun qarşılıqlı əlaqəsini də göstərir.
Standartla uyğun gələn Hover dəyərləri fərdiləşdirilməyənə qədər baza redaktələrini izləyir. İxrac edilmiş CSS lazım olduqda hover qaydasını, fokus-görünən konturu, aktiv hərəkəti və azaldılmış hərəkət qaydasını ehtiva edir.
CSS-u layihənizə gətirin
Yaradılmış CSS-u və uyğun HTML düyməsini kopyalayın və ya üslub cədvəlini yükləyin. Sinif adı iki hissəni bir-birinə bağlı saxlayır.
Kopyalayın, yükləyin və işinizi saxlayın
Birbaşa istifadə edə biləcəyiniz sadə kod
Fərqli bir Sinif adı seçin, CSS-u tabından kopyalayın, sonra düyməni HTML-dən kopyalayın. Yükləmə, sinif adlandırılmış .css faylını saxlayır; tam bir veb səhifəni yükləmir.
Önizləmə və kod generasiyası brauzerinizdə işləyir. Studiya bu brauzerin yerli yaddaşında bir qaralamanı yadda saxlamağa çalışır; saxlamaq istədiyiniz hər şeyi ixrac edin. Sıfırlama studiyanı başlanğıc üslubuna qaytarır.
Mətn və üslublar daxil. HTML və CSS xaric.
Yükləməyə ehtiyac yoxdur. JavaScript brauzerinizdəki canlı redaktoru işə salır. HTML və CSS-ni ayrı-ayrılıqda kopyalayın və ya CSS üslub cədvəlini yükləyin. Yaradılmış şrift yığını izləyicinin cihazında mövcud olan şriftlərdən istifadə edir.
