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 Google Map element

      The Google Map element allows you to add customized maps anywhere on your site. To create a new Google Map 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 ...

    • How to create a Code Block element

      The code block element is very useful. This allows you to embed the custom code that you want onto your page. To create a code block element, navigate to the Pages section from your Reactive admin under Website. Create a new page or edit an existing ...

    • How to create an accordion element

      To create an accordion menu on your Reactive website, you can use the Accordion element. This element allows you to create a menu that expands and collapses when clicked, providing a clean and organized way to present your content. Here’s how to ...

    • How to create a text element

      The text element allows you to add text content right into your page. To create a text 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 ...

    • How to create a skill bar element

      Skill bars are great for showcasing progressive stats like skills, in colorful visual bars. Here’s how to create skill bars: Visit the admin panel and click the Pages section under Website. Select the page on which you want to add the Skill bar. From ...