In this post we will see how Button module shortcode works,
Here is the shortcode for button module:
|
1 |
[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.
You May Also Like
- Shortocde is tested on Divi 2.7.5
Is there a way to add a class to this so I can make shDOWS, etc
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.
What’s the shortcode to button size?
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.
Hi,
Is it possible to hide the button icon within this shortcode?
Thanks!
As well is it possible to add the button class?
Thanks again
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
Thank you!
Your answer really helped me
Happy to Help You 🙂
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" /]
Hi when I use the button code in the Blurb module (basic button code not yours) it over shoots the actual blurb module particularly on mobiles and I wondered if there was an way to reduce the max size of the button as it doesn’t need to be as big as it is.
Someone suggested reducing the size from 300px to 200px and I can’t find how I do that
many thanks
Hi I was looking to resize the buttons which I added to the body element in a Blurb module but the button overhangs the module when it is resized or in mobile view. keeping it in the module boundaries at least would really help or knowing how to resize
thanks
Is there a list of all attributes for the button?
Having trouble styling it with CSS – espacially with the hover-part.
Any way to change the font size? I tried adding button_font_size=”15px” but it didn’t work.
text_font_size=”15px”
trying to figure out how to set it for each device but no luck yet /: