Divi Events Calendar

Documentation

Home » Docs » Bonus Customization Resources » How To Style The Event Website Link As A Button

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar Modules Plugin by Pee Aye Creative 2.2

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

How To Style The Event Website Link As A Button

Sometimes users ask me how to link from the Events Feed module directly to the event website, rather than the default single event page which is created by The Events Calendar. This is easy to do after version 2.2 with the custom Links settings. You can simply set the More Info button to link to the event website instead.

But sometimes you may want to show BOTH the website link and the single event page link, so you may want to style the Website link as a button to match the More Info button. For that, you can easily use some CSS to style the website link as a button.

BEFORE

change the Divi Events Calendar website URL into a button before image

AFTER

change the Divi Events Calendar website URL into a button after

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*provide some top and bottom spacing to the button*/

.ecs-weburl {
	margin: 1.5em 0
}


/*hide the icon*/

.ecs-weburl:before {
	display: none;
}


/*hide the label*/

.ecs-weburl .ecs-detail-label {
	display: none;
}


/*style the link to look like a button*/

.decm-show-detail-center .decm_weburl a {
	color: #FFFFFF!important;
	border: 2px solid #0048FF;
	border-radius: 50px;
	font-size: 20px;
	font-weight: bold!important;
	background-color: #0048FF!important;
	padding: 0.5em 1em;
  transition: all ease 0.3s;
}


/*style the link to look like a button on hover*/

.decm-show-detail-center .decm_weburl a:hover {
	color: #0048FF!important;
	background-color: #ffffff!important;
}

If you are showing the event excerpt, then it may not look right to have the button above the excerpt. To move it to the bottom, you will need to use jQuery, and I have created a snippet below that will do exactly that.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

<script>
	jQuery(document).ready(function(){
    jQuery(".ecs-weburl").each(function(){
        jQuery(this).parent().siblings(".ecs-excerpt").detach().insertBefore(this);
    })
})
</script>

Last updated Mar 1, 2022 @ 5:55 pm GMT-0400

Is This Article Helpful?