Joomla Buttons

Blue and green buttons

Add to the Joomla article

<button class="gf-button"><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Contact Eleanor</a></button>

/* Blue Button design */
.blue-button, {
color: #fff !important;
font-size: 16px;
background-color: #203ce1;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.blue-button a:link {
}

.blue-button:hover {
color: #000 !important;
background-color: #0820ad;
border-color: #000 !important;
border-width: 1px !important; 
border-style: solid;
}
/* END Button design */

/* Green Button design */
.green-button, {
color: #fff !important;
font-size: 16px;
background-color: #15af52;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.green-button a:link {
}

.green-button:hover {
color: #000 !important;
background-color: #176741;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
}
/* END Button design */

Add to the Joomla article

<button class="gf-button"><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Contact Eleanor</a></button>

Add to the template CSS

/* Button design */
.gf-button, {
color: #000 !important;
font-size: 20px;
font-family: playfair display;
background-color: #00dbf1;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.gf-button a:link {
color: #000 !important;
}

.gf-button:hover {
color: #000 !important;
background-color: #fff;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
}
/* END Button design */