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. 

1.  Einen Link in einen Beitrag oder eine Seite hinzufügen
2. diesem Link eine Klasse geben:

   <a class=“roter_button“ href=“http://www.loremipsum.de/“>Lorem Ipsum</a>

3. in die Frontansicht wechseln und das Entwickler Tool öffnen
4. den Link mit der definierten Klasse auswählen und auf das „Plus“ klicken
5. 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;
   }

6. den Code kopieren und die die Quick CSS (oder auch Custom CSS genannt) kopieren oder in die style.css deines Child-Themes einfügen
7. den Code mit einem Kommentar versehen, damit du später noch weißt was du gemacht hast. Mein Beispiel war: /*Roter Button*/
8. 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>

9. Solltest du etwas an deinen Buttons ändern wollen, so ändere den CSS-Code der CSS-Klasse und alle roten Buttons werden sich ebenfalls ändern