Stijl een knop visueel en krijg de HTML en CSS om deze op je website te gebruiken. Begin met een voorinstelling, pas typografie, kleuren, vorm en schaduwen aan en bekijk vervolgens de interactiestatussen voordat je exporteert.
Blader door 44 voorinstellingen in de collecties Everyday, Classic, Shaped, Expressive, Gradients en Elite. Elke voorinstelling is een startpunt dat je kunt bewerken.
Hoe voorinstellingen je ontwerp beïnvloeden
Kies eerst, verfijn daarna
Gebruik de Stijl-collectie om de galerij te verfijnen. Het toepassen van een voorinstelling vervangt zowel de standaard- als de hover-stijlen, terwijl je knoptekst en klassenaam behouden blijven.
Probeer een eenvoudige effen vulling, een afgeronde hoek, een strakke omlijning of een meer decoratieve behandeling. Zodra je een richting hebt gevonden, gebruik je de andere tabbladen om de details passend te maken voor je pagina.
Zorg dat het label goed aanvoelt
Stel de knoptekst, het lettertype, de grootte, het gewicht, de spatiëring, de regelhoogte, de uitlijning en de tekstkleur in. Zie hoe het label bijwerkt terwijl je werkt.
Verfijn tekst en spatiëring
Typografie die bij de actie past
Tekst bevat de lettertypebediening en een tweede knoptekstveld. De lettergrootte loopt van 10 tot 80 px; de vermelde lettertypes gebruiken lettertypes die beschikbaar zijn op het apparaat van de bezoeker.
Gebruik een kort label dat de actie beschrijft. In Vulling voegt horizontale en verticale opvulling ruimte eromheen toe zonder de tekstgrootte te wijzigen. Controleer langere labels op de pagina waar de knop zal worden gebruikt.
Kies een effen of verloopvulling
Gebruik één achtergrondkleur of meng twee kleuren met een lineair verloop. Kleurkiezers en hex-invoervelden laten je visueel of nauwkeurig werken.
Stel kleuren en verlooprichting in
Twee kleuren, één duidelijke richting
Wijzig in Vulling de vulstijl naar Lineair verloop om de Tweede kleur en de Verloophoek te onthullen. De hoek loopt van 0 tot 360 graden.
Hex-velden accepteren een volledige zescijferige kleur of een driecijferige afkorting. Test het witte of gekleurde label tegen beide uiteinden van een verloop; de studio certificeert het tekstcontrast niet automatisch.
Beheer de omlijning en diepte
Pas gekoppelde of onafhankelijke hoeken, randbreedte en -stijl, kaderschaduwen en tekstschaduwen aan. Geef de knop een vorm die bij de context past.
Verken hoeken, randen en schaduwen
Van een strakke rechthoek tot een zachte pilvorm
Houd in Vorm 'Alle hoeken koppelen' aan voor een gedeelde straal, of schakel dit uit om elke hoek afzonderlijk in te stellen. Randstijlen omvatten effen, gestreept, gestippeld, dubbel, inset, outset, ridge, groove en geen.
Stel in Schaduw de horizontale en verticale offsets, vervaging, kleur en dekking in. Kaderschaduw heeft ook een spreiding en een inset-schakelaar. Tekstschaduw is apart, zodat je diepte aan het label kunt toevoegen zonder de knopomlijning te wijzigen.
Ontwerp ook de interactie
Bewerk Standaard- en Hover-stijlen afzonderlijk. Bekijk de Standaard-, Hover- en Actieve weergaven en vergelijk de knop op lichte en donkere achtergronden.
Begrijp bewerkings- en voorbeeldstatussen
Twee bewerkbare stijlen, drie voorbeeldstatussen
De bewerkingsstatus kiest welke stijl je bedieningselementen wijzigen. De canvas-statusknoppen kiezen alleen het voorbeeld. Het aanwijzen of indrukken van het voorbeeld toont ook de interactie.
Hover-waarden die nog steeds overeenkomen met de standaard volgen basisbewerkingen totdat ze worden aangepast. De geëxporteerde CSS bevat indien nodig een hover-regel, een focus-zichtbare omlijning, een actieve beweging en een regel voor verminderde beweging.
Breng de CSS in je project
Kopieer de gegenereerde CSS en de bijbehorende HTML-knop, of download een stylesheet. Een klassenaam houdt de twee onderdelen verbonden.
Kopieer, download en bewaar je werk
Eenvoudige code die je direct kunt gebruiken
Kies een onderscheidende klassenaam, kopieer CSS van het tabblad en kopieer vervolgens de knop van HTML. Downloaden slaat een .css-bestand op dat vernoemd is naar de klasse; het downloadt geen volledige webpagina.
Voorbeeldweergave en codegeneratie draaien in je browser. De studio probeert één concept in de lokale opslag van deze browser te onthouden; exporteer alles wat je wilt bewaren. Reset brengt de studio terug naar de beginstijl.
Tekst en stijlen erin. HTML en CSS eruit.
Uploaden is niet nodig. JavaScript drijft de live-editor in je browser aan. Kopieer de HTML en CSS afzonderlijk, of download de CSS-stylesheet. De gegenereerde lettertypestack gebruikt lettertypes die beschikbaar zijn op het apparaat van de kijker.
