Tips and Tutorial to Use Button Module Shortcode in Divi

In this post we will see how Button module shortcode works,

Here is the shortcode for button module:

[et_pb_button admin_label="Button" button_url="www.xyz.com" url_new_window="on" button_text="Button Text" button_alignment="center" background_layout="light" custom_button="on" button_text_color="rgba(43,2,0,0.83)" button_bg_color="rgba(131,0,233,0.68)" button_border_color="rgba(12,113,195,0.82)" button_letter_spacing="2" button_font="Arial" button_on_hover="on" button_text_color_hover="rgba(236,239,31,0.71)" button_bg_color_hover="rgba(224,43,32,0.93)" button_letter_spacing_hover="2" /]

[et_pb_button admin_label="Button" button_url="www.xyz.com" url_new_window="on" button_text="Button Text" button_alignment="center" background_layout="light" custom_button="on" button_text_color="rgba(43,2,0,0.83)" button_bg_color="rgba(131,0,233,0.68)" button_border_color="rgba(12,113,195,0.82)" button_letter_spacing="2" button_font="Arial" button_on_hover="on" button_text_color_hover="rgba(236,239,31,0.71)" button_bg_color_hover="rgba(224,43,32,0.93)" button_letter_spacing_hover="2" /]

Where,

admin_label=”Button” –> button module’s label.

button_url –> URL of the button.

url_new_window –> It determines whether the link open in new window or in same window (on= to open in new window, off= to open the link in same window ).

button_text –> it reflects the text on button.

button_allignment –> Alignment of button (i.e center, left or right).

background layout –> it determines the background layout, it could be “light” or “dark”.

custom_button –> Select “on” to customize the button and “off” to not to customize.

button_text_color –> It determines the button text color.

button_bg_color –> This is for background color.

button_border_color –> Border Color.

button_letter_spacing –> It determines the letter spacing.

button_font –> specifies the font family for the button text.

button_on_hover –> to select the hover effect (“on” or “off”).

button_text_color_hover –> text color on hover.

button_bg_color_hover –> button background color on hover.

button_letter_spacing_hover –> button letter spacing on hover (i.e. value=1,2,3…).

The above shortcode will generate a button just like in image below-

divi button module

Feel free to comment below for any question or suggestion.

Lois Reed on September 26, 2016 at 2:36 pm

Is there a way to add a class to this so I can make shDOWS, etc
Abhishek on September 29, 2016 at 6:17 am

Hi,

In the et_pb_button tag you can add a new atrribute called
module_class=”myclass”
this will assign a new class “myclass” to your module.
Rawad Merhi on June 16, 2017 at 2:53 pm

What’s the shortcode to button size?
- Abhishek on June 17, 2017 at 4:20 am
  
  Hello @Rawad Merhi,
  There is no inbuilt option in the theme for Button size, but I can suggest you some CSS code, So can you please share the site URL.
Yura on August 7, 2017 at 12:17 pm

Hi,
Is it possible to hide the button icon within this shortcode?
Thanks!
Yura on August 7, 2017 at 12:21 pm

As well is it possible to add the button class?
Thanks again
- Abhishek on August 8, 2017 at 5:18 am
  
  Hello @Yura,
  Please use the below Button Module Shortcode and please don’t forgot to replace Button class as “Please_Place_Custom_CSS_Class” and place “on” or “off” in button_use_icon=”off” for turning on and off button icon.
  
  [et_pb_button admin_label="Button" button_url="www.xyz.com" url_new_window="on" button_text="Button Text" button_alignment="center" background_layout="light" custom_button="on" button_text_color="rgba(43,2,0,0.83)" button_bg_color="rgba(131,0,233,0.68)" button_border_color="rgba(12,113,195,0.82)" button_letter_spacing="2" button_use_icon="off" button_font="Arial" button_on_hover="on" button_text_color_hover="rgba(236,239,31,0.71)" button_bg_color_hover="rgba(224,43,32,0.93)" button_letter_spacing_hover="2" module_class="Please_Place_Custom_CSS_Class" /]
  
  You can also refer the below image URL for more http://imgur.com/a/BgQUJ
  - Yura Staryk on August 8, 2017 at 9:58 am
    
    Thank you!
    Your answer really helped me
    - EE Editor on August 9, 2017 at 3:15 am
      
      Happy to Help You 🙂
chris@designlabwest.com on March 13, 2018 at 10:47 pm

When I add your short code to my code module it deletes all the other copy. Its like its corrupts it, when I go back into the code module there is nothing there. 🙁 Can I delete part of this to get the result I want?

[et_pb_button admin_label="Button" button_url="www.xyz.com" url_new_window="on" button_text="Button Text" button_alignment="center" background_layout="light" custom_button="on" button_text_color="rgba(43,2,0,0.83)" button_bg_color="rgba(131,0,233,0.68)" button_border_color="rgba(12,113,195,0.82)" button_letter_spacing="2" button_font="Arial" button_on_hover="on" button_text_color_hover="rgba(236,239,31,0.71)" button_bg_color_hover="rgba(224,43,32,0.93)" button_letter_spacing_hover="2" /]