Formázza meg a gombot vizuálisan, és szerezze be a HTML-t és CSS-et a webhelyén való használathoz. Kezdje egy előbeállítással, állítsa be a tipográfiát, a színeket, az alakot és az árnyékokat, majd az exportálás előtt tekintse meg az interakciós állapotokat.
Böngésszen a 44 előbeállítások között a Mindennapi, Klasszikus, Formázott, Kifejező, Színátmenetes és Elit gyűjteményekben. Minden előbeállítás egy kiindulópont, amelyet szerkeszthet.
Hogyan befolyásolják az előbeállítások a tervet
Először válasszon, majd finomhangoljon
Használja a Stílusgyűjteményt a galéria szűkítéséhez. Az előbeállítás alkalmazása felülírja az alapértelmezett és a kurzor alatti stílusokat is, miközben megőrzi a gomb szövegét és osztálynevét.
Próbáljon ki egy egyszerű tömör kitöltést, lekerekített sarkot, éles körvonalat vagy dekoratívabb kezelést. Ha megtalálta az irányt, használja a többi lapot a részletek oldalhoz igazításához.
Tegye megfelelővé a címkét
Állítsa be a gomb szövegét, betűtípusát, méretét, vastagságát, térközét, sormagasságát, igazítását és a szöveg színét. Figyelje a címke frissülését munka közben.
Szöveg és térköz finomhangolása
A művelethez illeszkedő tipográfia
A Szöveg tartalmazza a betűtípus-vezérlőket és egy második Gomb szövegmezőt. A betűméret 10 és 80 px között mozog; a felsorolt családok a látogató eszközén elérhető betűtípusokat használják.
Használjon rövid címkét, amely leírja a műveletet. A Kitöltésnél a vízszintes és függőleges margók helyet adnak körülötte a betűméret megváltoztatása nélkül. Ellenőrizze a hosszabb címkéket azon az oldalon, ahol a gombot használni fogja.
Válasszon tömör vagy színátmenetes kitöltést
Használjon egy háttérszínt, vagy keverjen össze két színt lineáris színátmenettel. A színválasztók és a hexadecimális beviteli mezők lehetővé teszik a vizuális vagy pontos munkát.
Színek és színátmenet irányának beállítása
Két szín, egyértelmű irány
A Kitöltésnél módosítsa a Kitöltési stílust Lineáris színátmenetre a Második szín és a Színátmenet szöge felfedéséhez. A szög 0 és 360 fok között állítható.
A hexadecimális mezők elfogadnak egy teljes hatjegyű színt vagy egy háromjegyű rövidítést. Tesztelje a fehér vagy színes címkét a színátmenet mindkét végén; a stúdió nem hitelesíti automatikusan a szöveg kontrasztját.
A körvonal és a mélység szabályozása
Állítsa be a kapcsolt vagy független sarkokat, a szegély szélességét és stílusát, a dobozárnyékokat és a szövegárnyékokat. Adjon a gombnak a környezetéhez illő formát.
Fedezze fel a sarkokat, szegélyeket és árnyékokat
Az éles téglalaptól a lágy kapszula formáig
Az Alaknál tartsa bekapcsolva az Összes sarok összekapcsolása opciót az egységes sugárhoz, vagy kapcsolja ki az egyes sarkok beállításához. A szegélystílusok közé tartozik a tömör, szaggatott, pontozott, dupla, bemélyedő, kiemelkedő, gerinc, horony és a nincs.
Az Árnyéknál állítsa be a vízszintes és függőleges eltolást, az elmosódást, a színt és az átlátszatlanságot. A dobozárnyék rendelkezik terjedéssel és bemélyedés kapcsolóval is. A szövegárnyék különálló, így mélységet adhat a címkének a gomb körvonalának megváltoztatása nélkül.
Tervezze meg az interakciót is
Szerkessze külön az Alapértelmezett és a Kurzor alatti stílusokat. Tekintse meg az Alapértelmezett, Kurzor alatti és Aktív megjelenéseket, majd hasonlítsa össze a gombot világos és sötét vásznakon.
A szerkesztési és előnézeti állapotok megértése
Két szerkeszthető stílus, három előnézeti állapot
A szerkesztési állapot választja ki, hogy melyik stílust módosítják a vezérlők. A vászonállapot-gombok csak az előnézetet választják ki. Az előnézet fölé húzás vagy megnyomása az interakciót is mutatja.
Azok a kurzor alatti értékek, amelyek továbbra is megegyeznek az alapértelmezettel, követik az alapszerkesztéseket, amíg testre nem szabják őket. Az exportált CSS tartalmaz egy kurzor alatti szabályt, amikor szükséges, egy fókusz-látható körvonalat, egy aktív mozgást és egy csökkentett mozgás szabályt.
Helyezze a CSS-t a projektjébe
Másolja ki a generált CSS-t és a hozzá illő HTML gombot, vagy töltsön le egy stíluslapot. Egy osztálynév tartja összekapcsolva a két darabot.
Másolás, letöltés és a munka megőrzése
Egyszerű kód, amelyet közvetlenül használhat
Válasszon egy jellegzetes Osztálynevet, másolja ki a CSS-t a lapjáról, majd másolja ki a gombot a HTML-ből. A letöltés egy .css fájlt ment el az osztálynévvel; nem tölt le egy teljes weboldalt.
Az előnézet és a kódgenerálás a böngészőben fut. A stúdió megpróbál megjegyezni egy vázlatot a böngésző helyi tárhelyén; exportáljon mindent, amit meg szeretne tartani. A Visszaállítás visszaállítja a stúdiót a kiindulási stílusára.
Szöveg és stílusok be. HTML és CSS ki.
Nincs szükség feltöltésre. A JavaScript működteti az élő szerkesztőt a böngészőjében. Másolja ki a HTML-et és CSS-t külön-külön, vagy töltse le a CSS stíluslapot. A generált betűtípus-készlet a néző eszközén elérhető betűtípusokat használja.
