5 Unique Button Styles You Can Achieve With Divi’s Button Module

How to Track Almost Anything with Google Tag Manager and WordPress
August 21, 2016
Real World Websites Using the WordPress REST API in Cool and Unexpected Ways
August 22, 2016
Show all

Welcome to Day 83 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


In this post, we’re going to look at Divi’s Button Module and show you how to style it in five unique ways. The button module is one of the most popular of all the Divi modules because it’s so versatile and useful for getting site visitors to help you achieve your objective in a given post, page, or section. Therefore, it’s very important that we as designers and developers make these buttons appealing and eye catching.

Let’s dig in and find out what’s possible with Divi’s Button Module!

The Default Button Module

Before we get started, let’s take a look at what the Divi Button Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

Divi Button Default Look

Divi Button Default Look

The button module out of the box will be left aligned and set to whatever the theme color is. It’ll have a basic hover over state shown below.

Divi Button Default Look Hover Over Effect

Divi Button Default Look – Hover Over Effect

This is a good starting place, but we want our buttons to be as eye catching as possible. Not obnoxious, but vibrant and attention grabbing. We’re going to focus on five different styles without getting too involved with custom code or CSS. There are a few things I’d like to point out before we get into it:

  • With all of these examples, we’ll show you the button’s normal state AND hover over state. It’s best practice to style your buttons with a nice hover over effect.
  • One way to give a nice human element to your site is to steer away from robotic words like “submit” or “contact” as we want our buttons to be as inviting as possible.
  • We’re going to use “#” for the button URL which will give the button a link but keep it on the page but normally you’ll put your link in there. You will of course want to put an actual link in the url field when creating buttons for use on a live site.

The 3 areas we’ll be customizing in the testimonial module are:

  1. General Settings
  2. Advanced Design Settings
  3. Custom CSS
Button Module Settings

Button Module Settings

So, now that we’re set up and ready – let’s dive into it!

1. Wide Button – Inverse Hover

Example 1

Example 1

Example 1 Hover

Example 1 – Hover Over Effect

With just a few adjustments and color changes, you can easily bring this style to life and match it to the color scheme of your website. For this example, I’m using a vibrant but not “annoying” orange that’ll grab the eye of the user and encourage them to click. I’ve also increased the width of the button, centered it and put a nice hover over inverse effect on it.

To create this look, I did the following:

General Settings:

  • Button Text: Let’s Do This!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #ffffff
  • Button Background Color: #ff9b1f
  • Button Border Width: 1
  • Button Border Radius: 10
  • Button Font: Monterrat
  • Changed Button Icon to the double right arrow

Now the hover over settings:

  • Button Icon Color: #ff9b1f
  • Button Hover Text Color: #ff9b1f
  • Button Hover Background Color: #ffffff
  • Button Hover Border Color: #ff9b1f

Custom CSS:

Main Element

width: 80%;

Here’s what the settings look like:

Example 1 Advanced Design Settings

Example 1 Advanced Design Settings

You can see here that with most of the customizations in the Advanced Design Settings and just one line of CSS, you can easily take the Divi Button module to a whole new level with barley any code!

2. Engaging Image Over Button

Example 2

Example 2

Example 2 - Hover Over Effect

Example 2 – Hover Over Effect

The goal of this example is to utilize an “action image” to help encourage the website user to click the button below the image. This method can be VERY useful for newsletter sign ups and more. It really gives a personalized feel to a site rather than just a bare sign up button. I styled this button with colors from my image above to tie it all in together, but you can style this to work nicely with whatever image you choose.

Here’s what the backend will look like:

Example 2 Backend

Example 2 Backend

To create this look, I did the following:

Added the image module, uploaded my image, selected “no animation” on the image and center aligned it.

In the button module settings, I changed the following:

General Settings:

  • Button Text: Message Me
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #454853
  • Button Background Color: #ffffff
  • Button Border Width: 1
  • Button Border Radius: 0
  • Button Font: Comfortaa (bold and uppercased)
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Button Icon Color: #dedfe0
  • Button Icon Placement: Left
  • Butto Hover Text Color: #dedfe0
  • Button Hover Background Color: #454853
  • Button Hover Border Color: #dedfe0

Here’s what the Advanced Design Settings look like:

blog-button-2-styles

Example 2 Advanced Design Settings

And that’s it! Pretty easy and unique way to drive some attention to a specific call-to-action. Again the goal here was to utilize an image along with the button to capture the attention of the website user and give it a friendly touch.

3. Double Button – Left & Right

Example 3 Left & Right

Example 3 Left & Right Buttons

Many times you’ll run into a situation where a website user will need to choose more than one option. In this example, I’m mocking up a situation where the user can either buy a product or get more information. You can easily do this by just stacking one button on top of another, but adding buttons on the left and right and blending them together makes it a littler more appealing. I’m also using some color psychology here as well. Green colors typically mean “Go” and Red colors typically mean “Stop” or give off a feeling of caution so we’re going to use a green button on the left saying “I’m Ready To Buy!” and a red button on the right button stating “I Have Some Questions.”

This is also a great way to capture a potential customers information even if they don’t buy your product immediately. If a user doesn’t want to buy right away, you want to make them feel invited to ask some questions or get more information. Otherwise, they may just bounce off the site and you’ve lost a great opportunity to capture the information of a potential client or customer.

Here’s what the hover over effects will look like:

Example 3 Left - Hover Over Effect

Example 3 Left – Hover Over Effect

Example 3 Right - Hover Over Effect

Example 3 Right – Hover Over Effect

To create this look, I did the following:

Added a 2 column row and added the button module to each section.

Example 3 Backend View

Example 3 Module Backend

In the left button module settings, I changed the following:

General Settings:

  • Button Text: I’m Ready To Buy!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 24
  • Button Text Color: #ffffff
  • Button Background Color: #5eb71f
  • Button Border Width: 0
  • Button Border Radius: 0
  • Button Font: Arvo
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Butto Hover Text Color: #5eb71f
  • Button Hover Background Color: #ffffff
  • Button Hover Border Radius: 0

Custom CSS:

Main Element – (This is where I’ve adjusted the width of the button, the angled shape and the radius on the left.)

width: 100%;
-webkit-clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
margin-right: -125px;
border-radius: 25px 0px 0px 25px;

In the right button module settings, I changed the following:

General Settings:

  • Button Text: I Have Some Questions.
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 24
  • Button Text Color: #ffffff
  • Button Background Color: #c64031
  • Button Border Width: 0
  • Button Border Radius: 0
  • Button Font: Arvo
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Butto Hover Text Color: #c64031
  • Button Hover Background Color: #ffffff
  • Button Hover Border Radius: 0

Custom CSS:

Main Element – (This is where I’ve adjusted the width of the button, the angled shape and the radius on the right.)

width: 100%;
-webkit-clip-path: polygon(14% 0, 100% 0%, 100% 100%, 0 100%);
clip-path: polygon(14% 0, 100% 0%, 100% 100%, 0 100%);
margin-left: -125px;
border-radius: 0px 25px 25px 0px;

Here’s a great resource for creating shapes with CSS: http://bennettfeely.com/clippy

One thing to note: This will take some extra work to align nicely on tablets and phones so for this example, I’ve disabled the Phone and Tablet views on the Row Module Settings.

Disable Section for Mobile/Tablet

Disable Section for Mobile/Tablet

As you can see here, with just a handful of adjustments to the Advanced Design Settings and a few lines of CSS, you can create a really cool look with 2 buttons side by side! You’ll impress some clients with this one 😉

4. Background Image in Button

Example 4

Example 4

Button 4 - Hover Over Effect

Example 4 – Hover Over Effect

With web design moving away from image graphics and more into flat design and CSS based call-to-actions, this method must be used wisely, but every once in a while, it’s fun to use a background image to give some life to a button! I’ve mocked up a situation here where we’re going to encourage the website user to take the next step in booking a trip to the ocean. I’ve used a background image of ocean water to give this button some life and a flat color hover over effect.

To create this look, I did the following:

General Settings:

  • Button Text: Start Your Trip!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 30
  • Button Text Color: #e8f4f1
  • Button Border Width: 2
  • Button Border Color: #029a9c
  • Button Border Radius: 50
  • Button Font: Chewy

Now the hover over settings

  • Butto Hover Text Color: #ffffff
  • Button Hover Background Color: #029a9c
  • Button Hover Border Color: #ffffff

To Add the background image, go to your wordpress dashboard and go to Media > Add New and upload the background image. Once the images is uploaded, click it and copy the URL path like it’s shown below.

In my case, I copied “/wp-content/uploads/2016/08/button-4-bg.jpg”

blog-button-4-bg

Background image URL path

Now go back into the button module and into the Custom CSS. Here you’ll use the CSS below with the image URL path you copied. I’ve also changed the width of the button and added some extra padding to give it some space.

Custom CSS:

background: url('/wp-content/uploads/2016/08/button-4-bg.jpg') top center no-repeat;
width: 350px;
padding: 20px;

 

And there you have it! Now you know how to put an image in the background of a button! Divi’s basic hover over function also give this a very cool effect for the user.

5. Button Integrated with Background Image

Example 5

Example 5

Example 5 - Hover Over Effect

Example 5 – Hover Over Effect

In this last example, we’re going to make our call-to-action button blend seamlessly into the background image by adjusting the colors and adding a few effects. This is a great way to separate a CTA button or contact section of your website.

To create this look, I did the following:

Added the background image to the Section Module Settings and added 200px padding to the top and bottom to give the button some room.

Example 5 Section Module Backend

Example 5 Section Module Backend

Example 5 Section Module Padding

Example 5 Section Module Padding

Then in the Button Module Settings,

General Settings:

  • Button Text: Work With Us
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #e2e3c5
  • Button Background Color: rgba(52,77,74,0.94)
  • Button Border Width: 1
  • Button Border Color: #e2e3c5
  • Button Border Radius: 0
  • Button Font: Oswald (uppercase)

Now the hover over settings:

  • Butto Hover Text Color: #344d4a
  • Button Hover Background Color: #e2e3c5
  • Button Hover Border Color: #344d4a

Finally, in the Custom CSS panel, I’m going to add a shadow to make this pop out from the image and widen the button width.

Custom CSS:

width: 300px;
box-shadow: 2px 1px 18px #284242;

Now you have a button that blends in nicely and seamlessly with a background image! This can really add a unique dynamic to your site when you want to draw your website users to a specific call-to-action.

Wrapping Up

I hope these examples have inspired you to have some fun with the Divi Button Module! A call-to-action is one of the most important aspects of a website’s design so it’s very important that we, as creatives, have a variety of ideas in our tool box to create some unique button options. Feel free to use these ideas and the Divi Button Module to come up with some amazing button styles!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail background image by ByEmo / shutterstock.com.

divi-2-6-logo

Divi 100 Day 83

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Unique Button Styles You Can Achieve With Divi’s Button Module appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar