1. Home
  2. Docs
  3. Content Elements
  4. Button

Button EA Element

The button is a powerful WP button generator element by Elementor Addons for Elementor. You can create some stunning buttons by using this lightweight Button Element within Elementor Page very easily. Create great-looking CSS3 WordPress buttons in a minute and insert them anywhere in your site – page/post editor, sidebars, template files and so on. Here in this tutorial, you’re going to explore all about Button and see how to work with this incredibly important element. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Button Element

 

»Content

 

Button Content

⇒Button Text: Type the text of your Button. You can customize the text in your own language that will be shown as your Button Text.

⇒Link URL: This is where you can add your Desire link or URL so that your Button can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Icon: If you want to add an icon within the button, then select the icon you want from here. You can choose from the icon library or upload an SVG as an icon.

⇒Icon Position: Set the icon position either before or after the button text.

⇒Icon Spacing: Generate some space between the icon and the button text manually.


»Style

 

Button Effects & Style

⇒Set Button Effect: Set a type of effect applied to the button on hover. You can choose the default effect or any other you want from the list.

⇒Button Alignment: Set the button alignment either left, center or right.

⇒Width: Set the width of the button for different dimensions.

⇒Typography: Set the typography options for the button text.

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

 

⇒Text Color: Customize the button text color for Normal & Hover view.

⇒Background Color: Set a custom color for the button background in both Normal & Hover view.

⇒Border Type: Select a border type from the list according to your preference for Normal & Hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Button Element.


Was this article helpful to you? Yes No

How can we help?