Customizing the Event Espresso’s REGISTER NOW Button

Feb 10, 2016

I have been hearing about Event Espresso for years now but I never really used it in any of my web design projects until I had a colab project with Develop Bright. We had a Utah based business that teaches dental assisting. They are offering their courses in three different cities around Utah.

Using the Divi theme, the website looks really cool and classy but for Event Espresso’s REGISTER NOW button. There is no backend easy-to-tweak option to change it. Here’s how the default button looks.

Capturebutton

After Googling for answer I stumbled upon Even Espresso’s forum and there I found the exact answer that I am looking for. Check it out here.

Here’s how it looks now.

Capture2button

To achieve this, copy the following code and paste it in your style.css file.

Play around with the numbers and colors according to your desire.

/*REGISTER NOW BUTTON*/
.ticket-selector-submit-btn {
border-top: 1px solid #000;
background: #000;
padding: 12px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 20px;
text-decoration: none;
vertical-align: middle;
}
.ticket-selector-submit-btn:hover {
border-top-color: #000;
background: #212121;
color: #ccc;
}
.ticket-selector-submit-btn:active {
border-top-color: #212121;
background: #1b435e;
}

Cheers!

Share This