Webseite wird geladen!

Buttons mit Font Awesome

Man kann wirklich mittlerweile tolle Buttons mit Icons problemlos in WordPress einfügen. So geht´s:

  1. Font Awesome Plugin installieren
  2. Schriftzug erstellen
  3. Icon auf Font Awesome aussuschen
  4. CSS mit Hover Effekt erstellen
  5. HTML-Code in Editor einfügen

CSS-Code:

.button{
color: #000;
background-color: #FFFFFF;
text-align: left;
font-size: 16px;
border: 1px solid #000000;
border-radius: 10px;
height: 35px;
text-align: center;
padding-top: 3px;
width: 180px;
transition: all 0.4s;
margin-bottom: 0px;
text-decoration: none!important;
}

.button:hover{
background-color: #7fa500;
border: 1px solid #7fa500;
color: #FFFFFF;
text-decoration: none!important;
}

.button:active{
background-color: #7fa500;
border: 1px solid #7fa500;
color: #FFFFFF;
text-decoration: none!important;
}

In HTML-Code einbetten:
<p class=”button” style=”text-align: center;”><a href=”tel:+491712222222″><i class=”fas fa-phone-alt”></i>

 

Beispiel Buttons:

 0171 2222222

Font Awesome

Newsletter

 

 

 

WordPress - Creative Publisher