Diversen Button Stijlen
Update: Het thema is inmiddels vervangen maar de uitleg in de artikel nog prima bruikbaar voor als je recent met CSS begonnen bent i.c.m. WordPress.
Ik gebruik voor mijn website een Premium thema. Echter was ik niet tevreden over de button stijl. Er zitten een aantal standaard widgets in het thema. De knoppen hiervan hebben een andere stijl dan de knoppen die te zien zijn bij formulieren. De knoppen van de formulieren, gemaakt m.b.v. plugin Contact Form 7, hebben standaard (WordPress) buttons. Omdat deze ook niet naar wens waren besloot ik beiden stijlen naar een nieuw ontwerp te veranderen.
De oplossing van dit probleem vergt wat CSS/HTML kennis maar is relatief eenvoudig. Dit zijn de stappen in het kort:
- Button stijl samenstellen
- Nieuwe class aan stijl sheet toevoegen
- De nieuwe stijl toepassen op je website
Button stijl samenstellen
Een nieuwe button stijl kiezen is met het juiste gereedschap snel gerealiseerd. Dat gereedschap vind je op CSS Button Generator.
CSS code generator voor button stijl
Hier in het kort het minimaal aantal stappen om de code te genereren. Je kan met deze tool helemaal los met kleuren, randen, schaduw e.d. maar dat is jou ontdekkingsreis 😉
- Voer je button tekst in
- Geef een CSS classname op
- Kies onder “Color Themes” een kleur samenstelling
- Klik op de voorbeeld button
- Maak een kopie van het lange code voorbeeld voor in je style.css
NB: De korte code geeft de HTML code aan met de juiste classname maar dat leg ik later uit.
Verschillende button stadia
Met dat je de CSS code voor je nieuwe stijl hebt moet je er wel erg in hebben dat een button (of link) zich in een aantal stadia kan bevinden. Dat zijn:
- Normal: gewone weergave
- Hover: als je er met je muis overheen beweegt
- Active: als je er op klikt
- Visited: als je de link al eens bezocht hebt.
Hiervoor zijn de verschillende stijlen gegenereerd in de code die je moet kopiëren.
NB: Hou de stijl van “visited” het zelfde als “normaal”. Dit is tegen de stijl regels in bij gewone links, maar voor dergelijke knoppen staat dat beter.
Nieuwe class aan stijl sheet toevoegen
Nu de stijl definities vast staan kunnen we ze toevoegen. Elk thema heeft een style.css bestand inde thema directorie staan waarin de vormgeving van je thema besloten ligt. Dit kan je op je computer bewerken en uploaden (ftp-en) of toevoegen via de WordPress file editor. Het is aan jou wat je handig vindt.
Class namen kiezen voor eigen buttons
De stijl die we gemaakt hebben moet als een zogenaamde “Class” aan de stijl sheet toegevoegd worden. Hierdoor kan er aan gerefereerd worden waardoor een element op je pagina met deze stijl wordt weergegeven.
Class namen moeten uniek zijn. Gebruik bijvoorbeeld een afgekorte combinatie van je naam en een beschrijving. Voor de buttons op de cap5.nl website gebruik ik c5-green, je kan bij meer stijlen ook beschrijvender zijn en de Class c5-button-green noemen. Zolang hij maar uniek blijft.
Classes voor standaard buttons aanpassen
Indien je de bestaande buttons van een andere stijl wilt voorzien moet je in de style sheet duiken. De formulier plugin Contact Form 7Â gebruik bijvoorbeeld “.wpcf7-submit”. De zoekknop die ik gewijzigd wilde hebben in de widget van mijn thema heet “.searchsubmit”. Wil je de Class namen van de knoppen aan dezelfde stijl toekennen dan voeg je ze komma gescheiden samen op 1 regel, dat ziet er dan zo uit:
CSS button stijl code voorbeeld
De nieuwe stijl toepassen op je website
Nu de stylesheet op orde is en de stijlen zijn toegevoegd kunnen we ze aanroepen in de pagina’s. Heb je ook een bestaande button stijl aangepast op de pagina van je website dan zie je deze al verschijnen na een pagina reload in je browser.
Class attribuut toevoegen aan buttons of links
Nadat de nieuwe standaard stijl al zichtbaar is moeten we de nieuwe stijl nog gaan gebruiken op andere elementen. Dit doen we door een class attribuut toe te voegen, bijvoorbeeld: class=”c5-green”.
Dit doe je in de html code van een pagina. Wees hier even voorzichtig want als er foutieve html code ontstaat haalt WordPress dat om veiligheidsredenen er weer uit.
Als je in je WordPress dashboard zit ga je naar het bewerk scherm van een pagina. Ter hoogte van de button balk die je normsliter gebruitk om je tekst op te maken zie je een tabje genasmd “html”. Als je hierop klikt zie je de html code waaruit de pagina van je website bestaat.
Hierin moet je op zoek naar de link die je in een knop wilt veranderen. Als je deze gevonden hebt gaan we het class attribuut toevoegen. Een voorbeeld uit de CAP5 pagina ziet er als volgt uit:
<a class="c5-green"Â title="Voorbeeld link" href="/voorbeeld/">Voorbeeld link</a>
Als je het attribuut hebt toegevoegd aan de code kan je terug naar de normale editor view. Klik hiervoor op de WYSIWYG tab. Als je de pagina nu opslaat kunnen we naar het resultaat kijken.
Letop: Je pagina editor geeft de knop niet weer, deze zie je alleen op je website pagina zelf.
Ga op je website naar de pagina die je zojuist hebt opgeslagen. Als het goed is zie je nu een knop waar je eerder nog een gewone link zag. Een dergelijke knop onderscheid zich en valt enorm op. Hiermee blijven alle links op je website bruikbaar, maar kan je door het class attribuut te zetten selectief links in knoppen veranderen.
Zo kan je bezoekers eenvoudiger loodsen naar de belangrijke pagina’s. Denk aan die ene product pagina of bijvoorbeeld een workshop inschrijving. Toegegeven dat dit onderwerp de grens bereikt waar normaal WordPress gebruik stopt en ontwerp werk begint. Je kan hiermee toch de puntjes op de “i” zetten.
Heb je vragen of wil je meer weten ….
😉
Success met stylen!