At the bottom of each page on yatesdesign.com.au I’ve got a button that reads “Ready to launch a new project? Let’s work together →”. It’s a full width button that changes colour on hover and I get asked about it often so here’s a tutorial on how I did it.

The technique I use is to add a button module to the column I want to turn into a link & then position that button absolutely so that it covers the entire column. I’ve used this method on a few other layouts as well, like Blurb Cards, Image Module Hover Effect & Blurb Module Hover Effect.

Here’s a layout file you can import into Divi using the portability feature:

Here’s a look at what the finished product looks like:

OK! On to the tutorial.

Step 1

To start, add a row with 1 column & then use these settings:

• Enable “Make This Row Fullwidth:”
• Enable “Use Custom Gutter Width:” & set it to “1”
• Set “Custom Padding” to 0
• Enable “Keep Custom Padding on Mobile:”
• In the Custom CSS tab for the row, set the CSS Class to “fullwidth-cta”

Step 2

Add a text module & enter the text you want to show on the button.

Step 3

Add a button module and enter a URL and a description. The description will be hidden so it doesn’t matter what you put here. In the Custom CSS for the button module enter this into the Main Element section:

[css]
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
[/css]

Step 4

Add a code module and paste the following:

[html]
<style>
.fullwidth-cta, .fullwidth-cta .arrow {
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;
}

.fullwidth-cta:hover {
 background: #4CD964;
}

.fullwidth-cta:hover .arrow {
 padding-left: 5px;
}
</style>
[/html]

That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.