Icon buttons have grow to be crucial to the sector of internet design. Icons supply concise visible calls to motion that paintings nice for cellular units as a result of they don’t take in a large number of area. In addition they paintings neatly as toggle or popup buttons that customers intuitively acknowledge with out the desire for textual content.

In nowadays’s educational, we can be appearing you design icon buttons with Divi. Developing an icon button in Divi is fairly easy and a laugh to do. The use of the Icon Module, we will be able to make a choice from masses of icons and use numerous integrated Divi Builder design choices to create with reference to any roughly icon button you’ll recall to mind. Expectantly, this article is going to assist empower you to start out development some superb icon buttons in your subsequent venture.

Let’s get began!

Sneak Peek

Here’s a fast take a look at the icon buttons we’ll construct on this educational.

Obtain the Format for FREE

To put your arms at the structure from this educational, you are going to first want to obtain it the usage of the button under. To realize get entry to to the obtain it is important to subscribe to our Divi Day-to-day e-mail listing via the usage of the shape under. As a brand new subscriber, you are going to obtain much more Divi goodness and a loose Divi Format pack each and every Monday! Should you’re already at the listing, merely input your e-mail deal with under and click on obtain. You’re going to now not be “resubscribed” or obtain additional emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 sturdy { 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 sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of different superb and loose Divi sources, guidelines and tips. Practice alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely sort on your e-mail deal with under and click on obtain to get entry to the structure pack.

DOWNLOAD

You have got effectively subscribed. Please test your e-mail deal with to verify your subscription and get get entry to to loose weekly Divi structure packs!

See also  Introducing Sensible Question Observe

To import the segment structure on your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, make a choice the import tab and select the obtain report out of your laptop.

Then click on the import button.

As soon as executed, the segment structure shall be to be had within the Divi Builder.

Let’s get to the educational, we could?

What You Wish to Get Began

To get began, it is important to do the next:

1. Should you haven’t but, install and activate the Divi Theme.
2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
3. Select the choice “Construct From Scratch”.

After that, you are going to have a clean canvas to start out designing in Divi.

Designing Icon Buttons with Divi’s Icon Module

Phase 1: Development an Icon Button

To start, let’s upload a one-column row to the default common segment.

Then upload a brand new icon module to the column.

Icon, Hyperlink URL, and Background Colour

Underneath the content material tab of the icon settings modal, replace the next:

• Icon: Proper Arrow (see screenshot)
• Icon Hyperlink URL: # (only a filler for now)
• Background Colour: #3e22ff

Border and Border Radius

Underneath the design tab, replace the next:

• Rounded Corners: 10px
• Border Width: 2px
• Border Colour: #7272ff

Field Shadow

• Field Shadow: See screenshot
• Shadow Colour: rgba(62,34,255,0.48)

Matching Clickable House with Icon Button Measurement

Recently, the icon module will span the overall width of the father or mother container (or column). This implies the clickable area is greater than the true icon button. To check the clickable area with the dimensions of the icon button, we will be able to give the module a max width that is equal to the icon button width. The icon button width may also be made up our minds via including the icon width, the left and proper padding, and the left and proper border width. On this instance, the overall button width is 94px.

Underneath the complicated tab, upload the next customized CSS the Primary Component:

max-width: 94px

This is the outcome.

Phase 2: Development a Sq. Icon Button

To create our sq. icon button, reproduction the row containing the primary icon button we simply created. This will likely give us a replica button within the reproduction row to paintings with.

Give the Icon the Identical Top and Width whilst retaining it Focused

The huge selection of icons to be had to make use of within the Icon module come with each Divi icons and Fontawesome Icons. Then again, now not the entire icons may have an equivalent peak and width. This makes it slightly harder to decide the precise width and peak of the icon button. Lets make changes to the padding to get the scale good, however it is a bit bulky and may restrict probably the most hover choices for the icon. For instance, including padding to the icon module will create area across the icon. So, for those who create a hover method to alternate the icon shade on hover, the icon shade wouldn’t alternate when soaring over the gap (or padding) across the icon. It might alternate handiest when soaring over the icon itself.

With a purpose to create a wonderfully sq. button that engages the icon on hover, we will be able to upload some customized CSS to set a peak and width for the icon in addition to heart the icon the usage of the CSS Flex assets.

Right here’s do it.

First, open the settings for the reproduction icon. Then replace the icon with a brand new one from the icon picker.

Take out the padding for the icon module. This received’t be wanted since we can be atmosphere a peak and width for the icon.

Underneath the complicated tab, upload the next customized CSS to the Icon Component:

peak: 90px
width: 90px
show: flex;
align-items: heart;
justify-content: heart;

Now the icon button may have an equivalent peak and width of 90px which can make it an ideal sq.. Plus the flex assets aligns the icon within the heart of the module. This permits you to replace the icon measurement throughout the icon module conveniently.

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

• Background Gradient Left Colour: #3e22ff
• Background Gradient Proper shade: #ff2000
• Border Colour: #fff

This is the overall consequence.

Development a Round Icon Button

As soon as the icon button is an ideal sq., making it round is modest. However sooner than I display you this straightforward trick, let’s reproduction the former row to kickstart the construct of our round icon button.

Now open the settings for our new reproduction icon and, below the design tab, replace the border radius (or rounded corners) as follows:

• Rounded Corners: 50%

And identical to that, we have now a round icon button!

To switch up the design somewhat, let’s give the icon module a special icon and background shade as follows:

• Icon: see screenshot
• Background Colour: #121212

This is the outcome.

Development an Icon Button Horizontal Menu

One fashionable development is to make use of icons to construct an icon menu which in most cases is composed of more than one buttons located side-by-side. To try this we will be able to use the flex assets. Right here’s the way it’s executed.

First, upload a brand new one-column row to the web page.

Open the row settings and replace the gutter width to at least one.

• Gutter Width: 1

Subsequent, open the settings for the column throughout the row and upload the next customized CSS to the column primary part:

show:flex;
align-items:heart;

Upload a brand new icon module to the column.

Underneath the content material tab of the icon settings, make a choice an icon and upload an icon hyperlink URL.

Underneath the design tab, replace the next:

• Icon Colour: #3e22ff
• Icon Measurement: 40px
• Margin: 10px left, 10px proper
• Border width: 2px
• Border Colour: #3e22ff

NOTE: The margin will create area between the adjoining buttons when we upload extra in a while.

Underneath the complicated tab, upload the apply customized CSS to the Icon Component (like we did in the past for the sq. icon button):

 
show: flex;
align-items: heart;
justify-content: heart;
peak: 60px;
width: 60px;

Now each time we upload new icon buttons, they’ll seem side-by-side. To show this, let’s reproduction the prevailing icon button 3 times to create a complete of 4 icon buttons within the horizontal menu.

After that, we will be able to return and replace the icons as wanted.

This is the outcome.

Including Icon Button Hover Results

It’s laborious to discuss designing icon buttons with out bringing up hover results. They’re simply an excessive amount of a laugh to forget about. I received’t bore you with all of the chances to be had with Divi’s integrated hover choices, however I will be able to point out a couple of to get the ones ingenious juices flowing.

Converting Background Colour and Icon Colour on Hover

Converting the colours of the button is a well-liked and efficient hover impact. For instance, we will be able to alternate the background shade and the icon shade concurrently when the person hovers over the button.

To try this, open the icon module settings and turn on the hover choices for the background shade and select a special shade for the hover state. Then you’ll do the similar for the icon. On this instance, we’re converting the background shade from white to blue in addition to converting the icon from blue to white.

Converting Icon on Hover

Some other hover impact chances are you’ll like is converting the icon to another one altogether. To try this, you’ll select a special icon for the hover state when opting for an icon within the icon settings.

Scale Icon Button on Hover

One hover impact this is laborious to forget about is the scaling hover impact. This makes the icon button extend or grow to be better in measurement. One of the simplest ways so as to add this sort of hover impact is to make use of Divi’s turn out to be choices. This will likely permit the button to develop with out affecting the weather surrounding it.

So as to add a scale hover impact to the icon button, open the icon settings and, below the design tab, in finding the turn out to be choices. Turn on the hover choices after which assign the next turn out to be scale to the hover state:

• Change into Scale Y: 118%
• Change into Scale X: 118%

This will likely building up the dimensions of the icon button via 18% when the person hovers over it.

Rotate Icon Button on Hover

Rotating issues on hover is at all times a a laugh micro-interaction. To rotate an icon button on hover, we will be able to use the turn out to be rotate possibility. However sooner than that, let’s make the button round in order that handiest the icon seems to rotate.

To make the icon round, assuming the button is a sq., merely replace the rounded corners atmosphere to 50% on all 4 corners.

Then replace the turn out to be choices to incorporate a the next turn out to be rotate price within the hover state:

• Change into Rotate Z: 180deg

Let’s check out our 4 hover results in motion.

Ultimate Outcome

Let’s check out the overall effects from our educational.

Listed here are our 3 icon buttons (usual, sq., and round).

And here’s the icon button horizontal menu with hover results.

Ultimate Ideas

Understanding design icon buttons for a web page is very important. And, as we’ve noticed on this educational, it’s now not that arduous with Divi. Divi’s icon module has a host of integrated choices that open the door for ingenious icon button designs. Expectantly, the ways from this article is going to assist unencumber probably the most magic in your personal icon button designs.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; shade: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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);show:block;margin: 0 auto;}

The publish How to Design Icon Buttons with Divi’s Icon Module gave the impression first on Elegant Themes Blog.

read more