Buttons erstellen mit CSS – Video Tutorial
Hin und wieder braucht man einen Button oder einen Call to Action auf seiner WordPress-Seite. Viele Einsteiger benutzen Plugins dafür, aber mit ein wenig CSS kann man ganz einfach selber Links in Buttons verwandeln.
Wie das geht, erfahrt ihr im folgenden Video. Weiter unten findet ihr auch den verwendeten Code.
- Einen Link in einen Beitrag oder eine Seite hinzufügen
- diesem Link eine Klasse geben:
<a class=“roter_button“ href=“http://www.loremipsum.de/“>Lorem Ipsum</a>
- in die Frontansicht wechseln und das Entwickler Tool öffnen
- den Link mit der definierten Klasse auswählen und auf das „Plus“ klicken
- nun den CSS-Code einfügen und den Button gestalten. Mein Beispiel:
a.roter_button {
background: #dd3333;
padding: 7px 14px;
color: #ffffff !important;
border-radius: 3px;
} - den Code kopieren und die die Quick CSS (oder auch Custom CSS genannt) kopieren oder in die style.css deines Child-Themes einfügen
- den Code mit einem Kommentar versehen, damit du später noch weißt was du gemacht hast. Mein Beispiel war: /*Roter Button*/
- Wenn du nun einen weiteren roten Button erstellen möchtest, dann füge einen Link ein und versehe ihn mit der gleichen Klasse:
<a class=“roter_button“ href=“http://www.loremipsum.de/“>Lorem Ipsum</a>
- Solltest du etwas an deinen Buttons ändern wollen, so ändere den CSS-Code der CSS-Klasse und alle roten Buttons werden sich ebenfalls ändern
Vielen Dank für eure großartige Arbeit!
Mit eurer Hilfe habe ich einen „roten Button“ erstellt (wobei er bei mir „grüner Button“ heißt ;) ), und auch bei der einen oder anderen Frage bin ich bei euch gelandet und habe Antworten gefunden. CSS macht richtig Spaß, wenn man es grob verstanden hat, und ich fühle mich schon irgendwie wie ein kleiner Programmierer. B)
Ich hab euch als Wertschätzung und Dank auf meiner Seite verlinkt – hoffe, das ist in Ordnung für euch.
Ganz liebe Grüße
Britta