How to create a button element

How to create a button element

To create a new button element, navigate to the Pages section from the sidebar menu of your admin panel under Website.

  • Create a new page or edit an existing one. You can refer to our documentation about How to create a Page for more information.  
  • From the Content tab select the container and column you would like to place the button. 
  • Click the Add element button.
  • Select Button from the library.  

Section Details

Text. Add the text you want to display on the button. 

Text color. This setting allows you to customize the color of your text. 

Background color. This setting allows you to customize the background color of your element. 


Alignment. This setting allows you to choose how to align the text of your button. Choose between left, right, center or justify. Justify setting extends the lines so that each line has equal width. 


Font weight. This property sets the thickness of your characters displayed.

Font size. This setting allows you to adjust the size of the font. 

Letter spacing. This setting adjust the space between the characters in your text. 

Transform text. This setting is used to specify uppercase and lowercase letters in your text. 


Hover color. This setting allows you to control the color of your text on mouse over. 

Hover background color. This setting allows you to define a background color of your button on mouse over 

Hover border color. This setting allows you to define a border color of your button on mouse over. 


Dimensions . In this section you can adjust the margin and padding. 

Margin. This setting allows you to control the space around the button's border by changing the top, bottom, left and right values. 
Padding. This setting allows you to control the space between the content and borders of the button by changing the top, bottom, left and right values. 

Border style. This property sets the line style for all four sides of the button's border. Choose between none, solid, dotted, double or dashed option.  
Border radius top left and right. This setting allows you to set the border radius in the top left and right corner of the button. 
Border radius bottom left and right. This setting allows you to set the border radius in the bottom left and right corner of the button. 
These values can be set as a percentage or a specific size in pixels. 


Border width. This property allows you to set the width of your button's border. It can be set as a specific size in pixels. 

Border color. This setting allows you to set the color of your button's border and create the look you want. 


Link . In this section you can add a hyperlink to your button. 
Link target. Set how the link opens. Choose between "Open link in same tab" for the same window or "Open link in new tab" for a new tab. 
Once you have created your button click the "Apply" button at the bottom right of your screen. 

    • Related Articles

    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...

    • How to create an icon element

      Reactive allows you to place icons to your content. To create an icon, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You can refer to our documentation about How to ...

    • Building Forms with the Form Box Element

      The Form Box allows you to build custom forms using form blocks to add the fields you need. Forms are an effective way to receive messages and collect emails from your customers and visitors. Reactive’s Forms element enables you to create fully ...

    • How to add images using the Image Element

      Adding images to your Reactive pages is simple with the Image Element, which you can find in the Elements library on the left side of the editor. Uploading a New Image in Reactive To upload and place an image: Drag and drop the Image Element onto ...

    • Create scrolling sections with the Slider Element

      The Slider Element is a powerful tool for creating scrolling sections of content on your pages. Each slide is its own container, so you can add and customize elements freely. A common use is building image slideshows to showcase products. Slides per ...