Dit voorbeeld gebruikt alleen de bedieningselementen van de generator. De bovenstaande afbeeldingen tonen daadwerkelijk gedownloade stylesheets toegepast op gewone HTML knoppen, geen screenshots van de editor.
Begin met Signature
Open de CSS Knopgenerator. Kies bij Voorinstellingen voor Signature uit de Everyday-collectie. Stel de knoptekst in op “Get started”. Stel in het codegebied de klassenaam in op cta-button.
Een voorinstelling vervangt de standaard- en hoverstijlen, terwijl je label en klassenaam behouden blijven. Kies je startpunt voordat je gedetailleerde aanpassingen maakt.
De klassenaam verbindt de CSS regels met je HTML knop. De generator verwijdert niet-ondersteunde tekens; gebruik een korte, onderscheidende naam om te voorkomen dat niet-gerelateerde elementen worden gestyled.
Maak de verloop-pilvorm
Houd de bewerkingsstatus op Standaard. Kies bij Tekst voor System sans, lettergrootte 18 px en gewicht Vet. Houd de witte tekstkleur, normale stijl, gecentreerde uitlijning en regelhoogte 1.4.
Selecteer bij Vulling Lineair verloop. Gebruik de twee kleuren en de hoek hieronder. Stel Horizontale opvulling in op 32 px en Verticale opvulling op 16 px. Houd bij Vorm 'Alle hoeken koppelen' ingeschakeld en stel de hoekradius in op 100 px. De randbreedte blijft 0 px.
Houd bij Schaduw 'Slagschaduw' ingeschakeld. Gebruik horizontale verschuiving 0 px, verticale verschuiving 8 px, vervaging 24 px, spreiding −4 px, kleur #460BD8 en dekking 32%. Laat Binnenschaduw en Tekstschaduw uitgeschakeld.
Opvulling verandert de ruimte rond de tekst. Hoekradius verandert de omtrek. Een grote radius creëert deze pilvorm zonder het label breder te maken.
Geef hover een eigen behandeling
Schakel de bewerkingsstatus naar Hover. Wijzig bij Vulling de achtergrondkleur naar #33099E en de tweede kleur naar #6D20BF. Houd de verloophoek op 135°. Wijzig bij Schaduw de verticale verschuiving naar 10 px en de vervaging naar 28 px. Laat de overige instellingen ongewijzigd.
Gebruik de knoppen Standaard, Hover en Actief op het canvas om elke status te inspecteren. Je kunt ook over de voorbeeldknop zweven of erop klikken. Wissel het canvas tussen licht en donker om de rand en schaduw te beoordelen.
De bewerkingsstatus bepaalt welke stijlen je wijzigt. De canvasstatus verandert alleen wat je bekijkt. Keer terug naar Standaard bewerken voordat je het rustuiterlijk aanpast.
Hover-eigenschappen die nog steeds overeenkomen met de standaard, volgen latere standaardbewerkingen. Zodra je een hover-eigenschap aanpast, blijft deze onafhankelijk. Controleer beide statussen opnieuw na het wijzigen van de basisstijl.
Exporteren en testen op je pagina
Selecteer het CSS tabblad en gebruik Kopiëren CSS, of kies Downloaden om cta-button.css op te slaan. Selecteer het HTML tabblad en kopieer de bijbehorende knop-markup. De HTML bevat dezelfde klassenaam en een knop met type="button".
Voeg de CSS toe aan je stylesheet, of link het gedownloade bestand vanaf je pagina. Plaats de HTML waar de knop hoort. De twee exports werken samen: een HTML knop alleen bevat de styling niet.
Open de pagina en test de standaard-, hover-, toetsenbordfocus- en ingedrukte statussen. De export bevat een focus-zichtbare omtrek, een kleine actieve beweging en een regel voor verminderde beweging. Je omringende stijlen en geïnstalleerde lettertypen kunnen het resultaat nog steeds beïnvloeden.
De gegenereerde knop is een gestyled besturingselement. Verbind het klikgedrag in je project; gebruik het juiste knoptype wanneer je deze aan een formulier toevoegt.
cta-button.css
De gedownloade bestandsnaam volgt de klassenaam.
Veelgestelde vragen
Heb ik een CSS framework nodig?
Nee. De output is standaard CSS plus een gewone HTML knop. Plak de CSS in je eigen stylesheet en gebruik de bijbehorende klasse op de knop.
Slaat Downloaden ook de HTML op?
Downloaden slaat een .css bestand op dat vernoemd is naar de klasse. Kopieer de knop-markup afzonderlijk van het HTML tabblad.
Kan ik elke hoek een andere radius geven?
Ja. Schakel bij Vorm 'Alle hoeken koppelen' uit en stel vervolgens Linksboven, Rechtsboven, Rechtsonder en Linksonder onafhankelijk in. Dit voorbeeld houdt ze gekoppeld voor een pilvorm.
Is mijn ontwerp er de volgende keer nog?
De studio probeert het huidige concept op te slaan in de lokale opslag van deze browser. Dit is geen account of back-up voor meerdere apparaten. Browserinstellingen, het wissen van sitegegevens of Resetten kan dit verwijderen of vervangen, dus exporteer werk dat je wilt bewaren.
Wordt mijn knop geüpload naar een server?
Het voorbeeld van de styling en de CSS/HTML-generatie draaien in je browser. De editor uploadt je knoptekst of stylingconcept niet om de export te maken.
Geef je volgende knop een eigen stijl.
Kies een startpunt, pas de details aan en breng de code naar je project.