Site icon Hip-Hop Website Design and Development

How to Design Icon Buttons with Divi’s Icon Module

Pixeldust WordPress Developer

Icon buttons have become essential to the world of web design. Icons provide concise visual calls to action that work great for mobile devices because they don’t take up a lot of space. They also work well as toggle or popup buttons that users intuitively recognize without the need for text.

In today’s tutorial, we will be showing you how to design icon buttons with Divi. Creating an icon button in Divi is quite simple and fun to do. Using the Icon Module, we can choose from hundreds of icons and use countless built-in Divi Builder design options to create just about any kind of icon button you can think of. Hopefully, this article will help empower you to start building some amazing icon buttons for your next project.

Let’s get started!

Sneak Peek

Here is a quick look at the icon buttons we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Designing Icon Buttons with Divi’s Icon Module

Part 1: Building an Icon Button

To begin, let’s add a one-column row to the default regular section.

Then add a new icon module to the column.

Icon, Link URL, and Background Color

Under the content tab of the icon settings modal, update the following:

Border and Border Radius

Under the design tab, update the following:

Box Shadow

Matching Clickable Space with Icon Button Size

Currently, the icon module will span the full width of the parent container (or column). This means the clickable space is larger than the actual icon button. To match the clickable space with the size of the icon button, we can give the module a max width that is the same as the icon button width. The icon button width can be determined by adding the icon width, the left and right padding, and the left and right border width. In this example, the total button width is 94px.

Under the advanced tab, add the following custom CSS the Main Element:

max-width: 94px

Here is the result.

Part 2: Building a Square Icon Button

To create our square icon button, duplicate the row containing the first icon button we just created. This will give us a duplicate button in the duplicate row to work with.

Give the Icon the Same Height and Width while keeping it Centered

The large collection of icons available to use in the Icon module include both Divi icons and Fontawesome Icons. However, not all of the icons will have an equal height and width. This makes it a little more difficult to determine the exact width and height of the icon button. We could make adjustments to the padding to get the dimensions just right, but this is a bit cumbersome and could limit some of the hover options for the icon. For example, adding padding to the icon module will create space around the icon. So, if you create a hover option to change the icon color on hover, the icon color wouldn’t change when hovering over the space (or padding) around the icon. It would change only when hovering over the icon itself.

In order to create a perfectly square button that engages the icon on hover, we can add some custom CSS to set a height and width for the icon as well as center the icon using the CSS Flex property.

Here’s how to do it.

First, open the settings for the duplicate icon. Then update the icon with a new one from the icon picker.

Take out the padding for the icon module. This won’t be needed since we will be setting a height and width for the icon.

Under the advanced tab, add the following custom CSS to the Icon Element:

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;

Now the icon button will have an equal height and width of 90px which will make it a perfect square. Plus the flex property aligns the icon in the center of the module. This allows you to update the icon size within the icon module with ease.

To finish off this button, let’s give it a background gradient and a white border color as follows:

Here is the final result.

Building a Circular Icon Button

Once the icon button is a perfect square, making it circular is simple. But before I show you this easy trick, let’s duplicate the previous row to kickstart the build of our circular icon button.

Now open the settings for our new duplicate icon and, under the design tab, update the border radius (or rounded corners) as follows:

And just like that, we have a circular icon button!

To change up the design a bit, let’s give the icon module a different icon and background color as follows:

Here is the result.

Building an Icon Button Horizontal Menu

One popular trend is to use icons to build an icon menu which usually consists of multiple buttons positioned side-by-side. To do this we can use the flex property. Here’s how it’s done.

First, add a new one-column row to the page.

Open the row settings and update the gutter width to 1.

Next, open the settings for the column inside the row and add the following custom CSS to the column main element:

display:flex;
align-items:center;

Add a new icon module to the column.

Under the content tab of the icon settings, select an icon and add an icon link URL.

Under the design tab, update the following:

NOTE: The margin will create space between the adjacent buttons once we add more later on.

Under the advanced tab, add the follow custom CSS to the Icon Element (like we did previously for the square icon button):

 
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;

Now whenever we add new icon buttons, they will appear side-by-side. To demonstrate this, let’s duplicate the existing icon button three times to create a total of four icon buttons in the horizontal menu.

After that, we can go back and update the icons as needed.

Here is the result.

Adding Icon Button Hover Effects

It is hard to talk about designing icon buttons without mentioning hover effects. They’re just too much fun to ignore. I won’t bore you with all the possibilities available with Divi’s built-in hover options, but I will mention a few to get those creative juices flowing.

Changing Background Color and Icon Color on Hover

Changing the colors of the button is a popular and effective hover effect. For example, we can change the background color and the icon color simultaneously when the user hovers over the button.

To do this, open the icon module settings and activate the hover options for the background color and choose a different color for the hover state. Then you can do the same for the icon. In this example, we are changing the background color from white to blue as well as changing the icon from blue to white.

Changing Icon on Hover

Another hover effect you might like is changing the icon to a different one altogether. To do this, you can choose a different icon for the hover state when choosing an icon in the icon settings.

Scale Icon Button on Hover

One hover effect that is hard to ignore is the scaling hover effect. This makes the icon button expand or become larger in size. The best way to add this type of hover effect is to use Divi’s transform options. This will allow the button to grow without affecting the elements surrounding it.

To add a scale hover effect to the icon button, open the icon settings and, under the design tab, find the transform options. Activate the hover options and then assign the following transform scale to the hover state:

This will increase the size of the icon button by 18% when the user hovers over it.

Rotate Icon Button on Hover

Rotating things on hover is always a fun micro-interaction. To rotate an icon button on hover, we can use the transform rotate option. But before that, let’s make the button circular so that only the icon appears to rotate.

To make the icon circular, assuming the button is a square, simply update the rounded corners setting to 50% on all four corners.

Then update the transform options to include a the following transform rotate value in the hover state:

Let’s take a look at our 4 hover effects in action.

Final Result

Let’s take a look at the final results from our tutorial.

Here are our three icon buttons (standard, square, and circular).

And here is the icon button horizontal menu with hover effects.

Final Thoughts

Knowing how to design icon buttons for a website is essential. And, as we’ve seen in this tutorial, it’s not that hard with Divi. Divi’s icon module has a bunch of built-in options that open the door for creative icon button designs. Hopefully, the techniques from this article will help unlock some of the magic for your own icon button designs.

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post How to Design Icon Buttons with Divi’s Icon Module appeared first on Elegant Themes Blog.