Acest exemplu folosește doar controalele generatorului. Imaginile de mai sus arată foi de stil descărcate efectiv, aplicate pe butoane HTML obișnuite, nu capturi de ecran ale editorului.
Deschide Generatorul de butoane CSS
Începe cu Signature
Deschide Generatorul de butoane CSS. În Presets, alege Signature din colecția Everyday. Setează textul butonului la „Get started”. În zona de cod, setează Class name la cta-button.
O presetare înlocuiește stilurile implicite și de hover, în timp ce eticheta și numele clasei rămân neschimbate. Alege punctul de plecare înainte de a face ajustări detaliate.
Numele clasei conectează regulile CSS la butonul tău HTML. Generatorul curăță caracterele neacceptate; folosește un nume scurt și distinctiv pentru a evita stilizarea elementelor necorelate.
Creează pastila cu gradient
Păstrează starea de editare pe Default. La Text, alege System sans, dimensiunea fontului 18 px și greutatea Bold. Păstrează culoarea albă a textului, stilul normal, alinierea centrată și înălțimea liniei 1.4.
La Fill, selectează Linear gradient. Folosește cele două culori și unghiul de mai jos. Setează spațierea orizontală la 32 px și spațierea verticală la 16 px. La Shape, păstrează Link all corners activat și setează raza colțului la 100 px. Lățimea bordurii rămâne 0 px.
La Shadow, păstrează Box shadow activat. Folosește decalajul orizontal 0 px, decalajul vertical 8 px, estomparea 24 px, extinderea −4 px, culoarea #460BD8 și opacitatea 32%. Lasă Inset shadow și Text shadow dezactivate.
Spațierea modifică spațiul din jurul textului. Raza colțului modifică conturul. O rază mare creează această formă de pastilă fără a lăți eticheta.
Oferă hover-ului propriul tratament
Comută starea de editare la Hover. La Fill, schimbă culoarea de fundal la #33099E și a doua culoare la #6D20BF. Păstrează unghiul gradientului la 135°. La Shadow, schimbă decalajul vertical la 10 px și estomparea la 28 px. Lasă celelalte setări neschimbate.
Folosește butoanele Default, Hover și Active de pe canvas pentru a inspecta fiecare stare. Poți, de asemenea, să treci cu mouse-ul sau să apeși butonul de previzualizare. Schimbă canvas-ul între luminat și întunecat pentru a verifica marginea și umbra.
Starea de editare alege ce stiluri modifici. Starea canvas-ului schimbă doar ceea ce previzualizezi. Revino la editarea Default înainte de a ajusta aspectul de repaus.
Proprietățile de hover care încă se potrivesc cu cele implicite vor urma editările implicite ulterioare. Odată ce personalizezi o proprietate de hover, aceasta rămâne independentă. Reverifică ambele stări după schimbarea stilului de bază.
Exportă și testează în pagina ta
Selectează fila CSS și folosește Copy CSS, sau alege Download pentru a salva cta-button.css. Selectează fila HTML și copiază marcajul butonului corespunzător. HTML include același nume de clasă și un buton cu type="button".
Adaugă CSS în foaia ta de stil sau leagă fișierul descărcat din pagina ta. Plasează HTML acolo unde aparține butonul. Cele două exporturi funcționează împreună: un buton HTML singur nu include stilizarea sa.
Deschide pagina și testează stările implicit, hover, focus tastatură și apăsat. Exportul include un contur focus-visible, o mică mișcare activă și o regulă de reducere a mișcării. Stilurile din jur și fonturile instalate pot afecta în continuare rezultatul.
Butonul generat este un control stilizat. Conectează comportamentul de clic în proiectul tău; folosește tipul corect de buton când îl adaugi într-un formular.
cta-button.css
Numele fișierului descărcat urmează numele clasei.
Întrebări frecvente
Am nevoie de un framework CSS?
Nu. Rezultatul este CSS standard plus un buton HTML simplu. Lipește CSS în propria foaie de stil și folosește clasa corespunzătoare pe buton.
Download salvează și HTML?
Download salvează un fișier .css numit după clasă. Copiază marcajul butonului separat din fila HTML.
Pot oferi fiecărui colț o rază diferită?
Da. La Shape, dezactivează Link all corners, apoi setează Top left, Top right, Bottom right și Bottom left independent. Acest exemplu le păstrează legate pentru o formă de pastilă.
Designul meu va mai fi aici data viitoare?
Studioul încearcă să salveze schița curentă în stocarea locală a acestui browser. Nu este un cont sau o copie de rezervă între dispozitive. Setările browserului, ștergerea datelor site-ului sau Resetarea o pot elimina sau înlocui, așa că exportați lucrarea pe care doriți să o păstrați.
Butonul meu este încărcat pe un server?
Previzualizarea stilului și generarea CSS/HTML rulează în browserul dumneavoastră. Editorul nu încarcă textul butonului sau schița stilului pentru a crea exportul.
Oferă următorului tău buton propriul stil.
Alege un punct de plecare, ajustează detaliile și introdu codul în proiectul tău.