eXp Realty
            Knowledge Base Support WordPress Tutorials Advanced

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

            In this post, we’re going to look at Divi Rainmaker 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 Rainmaker 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 Rainmaker 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

            width80%;

            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 Rainmaker 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 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.)

            width100%;
            -webkit-clip-path: polygon(0 0100% 0%86% 100%0% 100%);
            clip-path: polygon(0 0100% 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.)

            width100%;
            -webkit-clip-path: polygon(14% 0100% 0%100% 100%0 100%);
            clip-path: polygon(14% 0100% 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

            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:

            backgroundurl('https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/08/button-4-bg.jpg'top center no-repeat;
            width350px;
            padding20px;

             

            And there you have it! Now you know how to put an image in the background of a button! Divi Rainmaker’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:

            width300px;
            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 Rainmaker  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 Rainmaker Button Module to come up with some amazing button styles!


            Updated: 25 Nov 2017 11:37 PM
            Helpful?  
            Help us to make this article better
            0 0