Stilizează vizual un buton și obține HTML și CSS pentru a-l folosi pe site-ul tău. Începe cu o setare predefinită, ajustează tipografia, culorile, forma și umbrele, apoi previzualizează stările de interacțiune înainte de export.
Răsfoiește presetările 44 din colecțiile Everyday, Classic, Shaped, Expressive, Gradients și Elite. Fiecare presetare este un punct de plecare pe care îl poți edita.
Cum afectează presetările designul tău
Alege mai întâi, apoi ajustează fin
Folosește colecția Style pentru a restrânge galeria. Aplicarea unei presetări înlocuiește atât stilurile implicite, cât și pe cele de hover, păstrând în același timp textul butonului și numele clasei.
Încearcă o umplere solidă simplă, un colț modelat, un contur clar sau un tratament mai decorativ. Odată ce găsești o direcție, folosește celelalte file pentru a face detaliile să se potrivească paginii tale.
Fă eticheta să pară potrivită
Setează textul butonului, familia de fonturi, dimensiunea, grosimea, spațierea, înălțimea liniei, alinierea și culoarea textului. Vezi cum se actualizează eticheta pe măsură ce lucrezi.
Ajustează fin textul și spațierea
Tipografie care se potrivește acțiunii
Textul conține controalele pentru font și un al doilea câmp pentru textul butonului. Dimensiunea fontului variază de la 10 la 80 px; familiile listate folosesc fonturi disponibile pe dispozitivul vizitatorului.
Folosește o etichetă scurtă care descrie acțiunea. În Fill, spațierea orizontală și verticală adaugă spațiu în jurul acesteia fără a modifica dimensiunea textului. Verifică etichetele mai lungi în pagina unde va fi folosit butonul.
Alege o umplere solidă sau gradient
Folosește o singură culoare de fundal sau îmbină două culori cu un gradient liniar. Selectorii de culoare și intrările hex îți permit să lucrezi vizual sau precis.
Setează culorile și direcția gradientului
Două culori, o direcție clară
În Fill, schimbă stilul de umplere în Linear gradient pentru a dezvălui a doua culoare și unghiul gradientului. Unghiul variază de la 0 la 360 grade.
Câmpurile Hex acceptă o culoare completă din șase cifre sau o prescurtare din trei cifre. Testează eticheta albă sau colorată pe ambele capete ale unui gradient; studioul nu certifică automat contrastul textului.
Controlează conturul și profunzimea
Ajustează colțurile legate sau independente, lățimea și stilul bordurii, umbrele casetei și umbrele textului. Oferă butonului o formă care se potrivește contextului său.
Explorează colțurile, bordurile și umbrele
De la un dreptunghi clar la o formă ovală moale
În Shape, menține Link all corners activat pentru o rază comună sau dezactivează-l pentru a seta fiecare colț. Stilurile de bordură includ solid, dashed, dotted, double, inset, outset, ridge, groove și none.
În Shadow, setează decalajele orizontale și verticale, estomparea, culoarea și opacitatea. Umbra casetei are, de asemenea, spread și un comutator inset. Umbra textului este separată, astfel încât să poți adăuga profunzime etichetei fără a modifica conturul butonului.
Proiectează și interacțiunea
Editează separat stilurile Default și Hover. Previzualizează aspectele Default, Hover și Active, apoi compară butonul pe fundaluri deschise și închise.
Înțelege stările de editare și previzualizare
Două stiluri editabile, trei stări de previzualizare
Starea de editare alege ce stil modifică controalele tale. Butoanele de stare a canvasului aleg doar previzualizarea. Trecerea cursorului sau apăsarea pe previzualizare arată, de asemenea, interacțiunea sa.
Valorile Hover care încă se potrivesc cu cele implicite urmează editările de bază până când sunt personalizate. Exportul CSS include o regulă de hover atunci când este necesar, un contur focus-visible, o mișcare activă și o regulă de reducere a mișcării.
Adu CSS în proiectul tău
Copiază CSS generat și butonul HTML corespondent sau descarcă o foaie de stil. Un nume de clasă menține cele două piese conectate.
Copiază, descarcă și păstrează-ți munca
Cod simplu pe care îl poți folosi direct
Alege un nume de clasă distinctiv, copiază CSS din fila sa, apoi copiază butonul din HTML. Descărcarea salvează un fișier .css numit după clasă; nu descarcă o pagină web completă.
Previzualizarea și generarea codului rulează în browserul tău. Studioul încearcă să rețină o schiță în stocarea locală a acestui browser; exportă tot ce vrei să păstrezi. Reset readuce studioul la stilul său inițial.
Text și stiluri înăuntru. HTML și CSS afară.
Nu este necesară nicio încărcare. JavaScript alimentează editorul live din browserul tău. Copiază HTML și CSS separat sau descarcă foaia de stil CSS. Stiva de fonturi generată folosește fonturi disponibile pe dispozitivul vizualizatorului.
