5 Imaginative Divi Button Module Styles & How to Make Them

In this post, I’ll reveal you 5 creative divi button module designs you can easily accomplish with Divi’s Button Module. The button module is one of the most popular of all the Divi modules since buttons are so crucial for leading visitors to your desired objectives throughout a site. It’s very important that we as designers and developers make these buttons appealing and eye catching.Let’s dig in! 5

Divi Button Module Styles & How to Make Them 1. Left Arrow Border Button To begin, create a brand-new area with a one column row

and add a button module to the row. Change the default material text of the button to check out” Get Begun “( or whatever you want really ). Now its time to jump over to the design settings and update the following:

Usage Custom-made Styles for Button: YES Button Text Color: #ffffff Button Background Color: # 324376 Border Width: 0px
Button Letter Spacing: 0.2 em
Button Font: Fira Sans Font Style Style: TT(
uppercase), U( underlined) Underline Color: rgba (255,255,255,0.2) Underline Design: double Button Icon: see screenshot Button Icon Color: #ff 4751 Button Icon Positioning: Left Custom-made Cushioning: 40px Left, 20px Box Shadow: see screenshot Box Shadow Horizontal Position: 22px Box Shadow Vertical Position: 0px Shadow Color: #ff 4751( The custom-made left cushioning of 40px creates a set area that is being filled with the box shadow to sit
flush against the left arrow button icon.) Because the left box shadow is flush versus the start of the arrow icon, this develops a good arrow border impact. If for some reason it does not sit

flush against the icon, you can adjust the horizontal position as required. The beauty of this design is that the left arrow border will stay in place even when including different quantities of button text.Here is the final outcome.2. Moving Line Button This next button style has more of a technical and minimalist feel. The lines are developed using a box shadow and a background gradient separated by a transparent border. I’ve likewise included a hover impact that moves package shadow to the right which in turn moves the bottom line slightly to the right for a subtle interaction.To start, develop a brand-new section with a one column row and include a button module to the row.Update the button text material to whatever you desire. I’m leaving the default” click here” for this example. Then upgrade the style settings as follows: Use Customized Styles for Button: YES Button Text color: # 3b7986 Button Background Gradient Left Color: rgba( 255,255,255,0) Button Background Gradient Right Color: # 3b7986 Gradient Direction: 180deg Start Position: 96% End Position:

• 0% Button Border Width: 10px Button Border color: rgba( 0,0,0,0) Button Border Radius: 0px Button Letter Spacing: 6px Button Typeface: Exo 2 Typeface Weight: Strong Typeface Style: Tt( little caps) Button Icon: Right Arrow( see screenshot) Just Show Icon
• on Hover
• for Button: NO
• Custom-made Padding: 0px
• Bottom Box Shadow: see screenshot
• Box Shadow Horizontal Position: -15 px Box Shadow Vertical Positon: 15px Box
• Shadow Spread Strength: -13 px Shadow Color: # 3b7986 You might need to set the background color to #ffffff on hover too given that this is the default setting for the button.The key to this style is the background
• color gradient and the box shadow. By setting the background color gradient beginning point to 96%, this creates a line that is 4% width at the bottom of the button. Then once we
• position and color the box shadow, we have another line aspect that covers the button perfectly. Plus, the best arrow icon works well with the line style elements as well.Here is the last design.To add the hover impact

  that moves package shadow, go back to the style settings and hover over the choice “Box Shadow Horizontal Position “. You will see an arrow icon popup right next to the text. Click it to open the hover choices for that specific setting. Click on the hover tab and alter the value to 13px. You will see the hover result previewed in the visual builder.Here is what the hover impact looks like:3. Pull Tab Button This next button style adds a box shadow

  to frame the best button icon that stays in an outright position. On hover the button extends to the right creating the impact that you are pulling a tab.To develop the button, first develop a new section with a one column row and after that add a button module to the row. Open the button module

  setings and update the button text under the content tab to whatever you desire (I’m going to utilize the text “Find out more “). Dive over to the style tab and update the following:

  Usage Customized Styles for

  Button: YES Button Text Color: #ffffff Button Background Gradient Left Color: # 7D80DA Button Background Gradient Right Color: # 8EEDF7 Gradient Direction: 90deg Button Border Width: 0px Button Border Radius: 10px Button

  Letter Spacing: 1px Button Font: Source Sans Pro Font Style Weight: Strong Font Style Design: TT Button Icon: See Screenshot Button Icon Color

  : #ffffff Custom-made Padding: 1em Left, 2.5 em Right Box Shadow: See Screenshot Box Shadow Horizontal Position: -35 px Box Shadow Vertical Position: 0px Shadow Color: # 7d80da The key to this design is the box shadow on the

  right that will frame the icon. But right now the icon needs to be positioned to fit inside the gradient location. To do this, we need to add some custom CSS.Go to the Advanced tab and enter the following CSS inside the After input box: position: outright; : 5%;.
  This CSS targets the place of the icon and provides it an absolute position 5% from the ideal edge of the button.Check out the design so far.Now to include the hover effect, we
  simply require to update the right padding choice under the hover tab. To do this,
  open the button settings and open the hover alternatives by hovering over the customized padding element and clicking the cursor icon that turns up. Pick the

  hover tab and go into the following: Custom Padding: 4em Now let’s have a look at the last result.4. Circle Logo Button For the next design, we are going to change a

  circle icon/image into a clickable button with a cool hover effect that shows a short call

  to action.To get things started, produce a brand-new section with a one column row and include a button module to the row.Then open the button design settings. Under the content
  tab, add the word" Go "for the
  button text. Then go to the design settings and choose to use the customized button styles. Include the circle image as a background image for the button. In order for this to design to work, ensure you utilize a png image of a logo design or icon that is an ideal circle and that the image measurements are the very same height
  and width. The image I'm utilizing
  is a png that is 118px by 118px.
  Get it here if you want: Once you add the background image, make certain the background image size is set to" Actual Size." This will ensure the image keeps it's original measurements( 118px by 118px). Next we wish to size our button to be the specific measurements of our cirlce image.
  To do this, dive over to the Advanced tab and get in the following customized CSS in the Main Aspect: 
  width: 118px;. height: 118px;. line-height: 118px! important;. Text-align:;. Notice that the css sets the width, height, and line-height all to the very same worth of 118px. This is the exact same width and height of our image. Now the image fits completely in the button. The line-height is set to 118px so that the text inside the button will be vertically centered within the button( its not completely centered yet since there is still some cushioning we need to get rid of that is throwing it off). And the text-align: center ensures the text inside the button stays centered even when the button module is left or right aligned.Now all we require to do is complete up with some style settings that will finish the design. Go the style tab and upgrade the following: Button Text Color( default): rgba (0,0,0,0 )Button Text Color( hover): #ffffff (This conceals the button text by default and
  reveals it in white
  on hover )Background Color( default): # 121212 Background Color( hover): #da
  

  00f2( This reveals a black background behind the image by default and then a bright pink background color on hover.) Button Border Width: 0px Button Radius: 50 %;( Setting the button radius to 50 %will alter the button into a circle shape since the height and width of the button has actually been set to 118px in customized css.) Button Font: Poppins Font Style Weight: Vibrant Font Style Design: TT Show Button Icon: NO (having a button icon will shake off the focused text )Custom Padding: 0px Top, 0px Bottom (It is essential to take out the leading and bottom cushioning so that the line-height

  we embeded in custom css will make the text vertically focused.) Box Shadow: see screenshot Box Shadow Vertical Position:

  0px Shadow Color (default): rgba( 0,0,0,0)
  Shadow Color (hover): rgba( 0,0,0,0.68 )( This will reveal a minor box shadow around the circle on hover for an extra popout impact.) Here is the
  last design with the hover impact.5. Shine Button This last style is pretty straight forward and easy to do. All it takes is an imaginative usage of background gradient colors and box shadow colors. The hover effect merely increases the size

  of the box shadow to give more of a glow effect.To start, produce a new section with a one column row and add a button module to the row.

  Before you upgrade the button module, open the area settings and give the area a dark background color( # 333333 ). Now open the button settings
  . You can leave the default button text” Click

  Here “. Then update the following style settings: Button Positioning: Center Usage Custom Styles for Button: YES Button Text Size: 18px Button text

  color: #ffffff Button Background Gradient Left Color: # 00ff8c Button Background Gradient Right Color: #
  15c39a Gradient Type: Radial Instructions: Center End Position: 75%( Setting the gradient type to Radial will provide the gradient a circle shape that expands outward. Ensure the lighter color programs

  in the middle of

  the gradient to create the radiance effect.) Button Border Width: 0px Button Border Radius: 100px Button Letter Spacing( default): 4px Button Letter Spacing( hover ): 5px( Increasing the letter spacing on hover will slightly expand the whole button for a good impact) Typeface Weight: Ultra Vibrant Typeface Design: I, TT Button Icon: best arrow( see screenshot) Custom Padding: 20px Top, 20px bottom, 30px left, 50px( you require more right padding to account for the best arrow

  button icon) Box Shadow

  : see screenshot Box Shadow Vertical Position: 0px Box Shadow Blur Strength( default): 64px Box Shadow Blur Strength( hover): 100px Box Shadow Spread Strength: -12
  px Shadow Color: rgba
  (0,255,140,0.66)( Package shadow contribute to the glow effect when you match the shadow color with the color of the button. Increasing the blur strength on hover will likewise magnify the glow of the button )Have a look at the final
  style with the hover effect.To find out about inspiration on button designs, examine out a few of these other posts: Final Thoughts I hope these examples have inspired you to make the most of the Divi Button Module in imaginative brand-new methods! Because a call to action is so crucial to your website, it is constantly good to have range of ideas in our tool box
  to create some distinct button options. Do not hesitate to utilize these concepts to come up with some incredible button styles of your own!I eagerly anticipate speaking with you in the comments.Cheers!Featured image by means of vasabii/ shutterstock.com