Jeg kæmpede med CSS på en enkel hjemmeside, og hvis du står i samme situation, deler jeg her mine bedste råd til at ændre farve og stil på en knap med CSS i WordPress eller lignende kode.
Stripe Checkout-plugin til WordPress
Jeg bruger dette plugin i en webshop for en af vores kunder, og vi ønskede en rød knap i stedet for den standardknap med hvid kant, som bliver lyserød ved hover via pluginets eller temaets opsætning.
Download Stripe Checkout-plugin til WordPress her
Guide: Sådan styler du en knap med CSS i et WordPress-tema
Før:
Efter:
- Jeg gik ind i WordPress-administrationen, holdt musen over “Udseende” og valgte derefter “Tema-filredigering” – eller et andet sted, hvor du kan styre temaets CSS, f.eks. style.css via FTP.
- Jeg tilføjede disse CSS-linjer for at style hele knappen:
input[type=button], input[type=submit], input[type=reset] {
background-color: #B30015;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}[type=”button”]:focus, [type=”button”]:hover, [type=”submit”]:focus, [type=”submit”]:hover,
button:focus,
button:hover {
color: white;
background-color: red;
text-decoration: none;
} - Derefter kan du kopiere koden ovenfor og indsætte den i CSS-filen til dit website. Du kan ændre farver og værdier, så de passer til dine behov, f.eks. med en kant ved hover. Den første del styrer knappens farve, når den ikke er hoveret. Den anden del styrer hover-tilstanden, når musen føres over den.
- Klik på Gem, så bør det ændre stilen på dit websites knapper.
Andre guides finder du her:
Sådan styler du input- og submit-knapper
https://www.w3docs.com/snippets/css/how-to-style-input-and-submit-buttons.html
CSS til styling af Stripe-kreditkortfelter på PMPro-checkoutsiden
https://gist.github.com/ipokkel/dae7315386e48e80c28a718339543a8b
Test dit CSS-værktøj
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button
Har du brug for mere hjælp til HTML, CSS eller WordPress?
Held og lykke. Har du brug for hjælp til kodning af en hjemmeside, CSS, HTML eller andet, så kontakt os, og vi kan booke en session for dig.
Venlig hilsen Mark Barner, ejer og webguru
