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. 

Buttons selber machen

Dieses Video ansehen auf YouTube.
Mit Klick auf das Vorschaubild, wird das Video von Youtube.com geladen. Details über die Verarbeitung deiner Daten stehen in der Datenschutzerklärung
  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

 

1 Antwort
  1. Britta says:

    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

    Antworten

Trackbacks & Pingbacks

Schreib einen Kommentar

Willst du an der Diskussion teilnehmen?
Dann schreib mir

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.