Categories: Divi Tutorials

Horizontal Image Buttons

Horizontal Image Buttons

In a Divi forum I'm a member of someone asked how it could be possible to create the following layout/buttons:

Initial thoughts in the forum were to try and use a speciality section, or to try and use an image module with a text module next to it, along with other suggestions.

Thinking on it for a little bit I presented another method of creating this, using only a single text module for each button, and I thought it'd be worthwhile posting it here in full instead of the quick response in the forum.

Preview

Before I get into the detail of the horizontal image buttons, here's a preview of what they will look like once I'm done:

Creating the Button

1. Create a new row

Start by creating a new row with two columns, similar to the original layout the person was asking about. This isn't really important but it'll show how the final links look compared to the original layout.

Background 1 add row

2. Add a text module

Add a text module to the second column and add the text you want to show in the button.

Background 1 add text module

3. Add a background image to the text module

Open the Background toggle and add the required image to background, leaving the background settings with their default values.

Background 1 column 1 class name

4. Add a gradient background to the text module

I'm going to use a gradient background above the background image to create the button colour effect.

Select the background gradient and do the following:

  • Set the first colour to be transparent
  • Set the second colour to be the button colour
  • Set the gradient direction to 90deg
  • Set the start position to 70%
  • Set the end position to 70%
  • Set place the gradient above background image to yes
Background 1 column 1 class name

Set the gradient hover colour.

Background 1 column 1 class name

5. Add a link to the text module

Open the Link toggle and enter the required link.

Background 1 column 1 class name

6. Customise the text module's text

Go to the Design tab, open the Text toggle and do the following:

  • Set the font weight to ultra bold
  • Set the text colour to white
  • Set the line height to 1.3em
  • Set the text alignment to be centre aligned
Background 1 column 1 class name

7. Customise the text module's spacing

Open the Spacing toggle and do the following:

  • Set the top padding to 40px
  • Set the bottom padding to 40px
  • Set the left padding to 70%
  • Set the mobile left padding to 50%
Background 1 column 1 class name

8. Add the rounded corners

Open the Border toggle and do the following:

  • Set the top left rounded corner to 10px
  • Set the bottom left rounded corner to 10px
Background 1 column 1 class name

9. Add the box shadow

Open the Box Shadow toggle and select the top right shadow style, leaving everything else set to their default values.

Background 1 column 1 class name

10. Add the hover transform

Open the Transform toggle and do the following:

  • Select the Transform Translate feature
  • Select the hover state
  • Set the vertical offset to -10px
Background 1 column 1 class name

And We're Done

A simple solution to what initially looked more complicated. Once you've created the button you can easily copy the module and change the background image and gradient colour for more buttons.