Creating a custom button

I need a button that works with events manager. I am using conditional placeholders to call the url. However, I cannot place them in the enfold button shortcode.

You can see the buttons here

Here is the code on the site, it produces a wonky button that doesn’t function.
<div class=”registration-button”>{has_att_bookingurl}<span style=”color:white;”>Click to Register</span>{/has_att_bookingurl}</div>

(This was to see if there was an error calling the url)
<div class=”registration-button”><span style=”color:white;”>Click to Register</span></div>

The url doesn’t function correctly. It leads to the wrong page.

Here is the css.
/* Buttons for registering on events pages*/
.registration-button {
border:#f70a3d;
border-width: .3px;
border-radius: .225em;
border:solid;
background-color:#bf0a31;
width:200px;
padding: 0.385em 0.923em 0.538em;
line-height: normal;
margin:8px;
text-align: center;
font-size:16px;
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
margin: 0 auto;
vertical-align: left;
}

.registration-button:hover {
border:#ebc4b5;
border-width: .3px;
border-radius: .225em;
background-color:#D3BCB3;
width:200px;
padding: 0.385em 0.923em 0.538em;
line-height: normal;
margin:8px;
text-align: center;
font-size:16px;
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
margin: 0 auto;
vertical-align: left;
}

.registration-button a {
color:white;
}

Can you tell me how to get the button working?