Button

Table of Contents

Businesses or Individuals create tables to represent data in tables to optimize and increase conversions. It can be either Sales, Marketing Subscriptions, or any other Opt-in actions. And the most important thing in such tables is a “Call to Action” button (CTA).

For example, pricing tables or comparison tables come with a button element at the end. And WooCommerce product tables have an “Add to cart” button.

Ninja Tables offers a “Button” element with a fully customizable CTA.

CTA element video

Let’s add a Button element to our Ninja Tables!

button element in table

Properties of Button Element #

ScopeOption NameType
GeneralEditor boxText Editor
Background ColorGraphical Color Selection
Border ColorGraphical Color Selection
Border SizeNumeric Value
Border RadiusNumeric Value
Full WidthToggle On or Off
URLText Field for Link of the Button
Open in another tabToggle On or Off
TextFont ColorGraphical Color Selection
Font SizeNumeric Value
Font StyleBold, Italic & Underline
IconEnable IconToggle On or Off
HoverButton HoverToggle On or Off

General #

customize table button
  1. Button Text Editor: You can either click on the button element or edit the text in this Editor Box.
  2. Background Color: You can change the color of the Hover Background. By default, it is set to Blue.
  3. Border Color: You can change the color of the Button. By default, it is set to Black.
  4. Border Size: You can control the size of the Border of the Button Hover. By default, it is set to 0.
  5. Border Radius: You can control the radius of the Border of the Button.  By default, it is set to 5.
  6. Full Width: You can toggle On or Off the Button to the Full width of the cell.
  7. URL: You can edit the link URL for the Button here.
  8. Open in another tab: You can toggle On or Off the Link behavior to open the link in the same window or in a new window.

Text #

customize button text
  1. Font Color: You can change the color of the text. By default, it is set to Black.
  2. Font Size: You can change the size of the text. By default, it is set to 15.
  3. Font Style: You can change the Font Style orientations. Available options are Bold, Italic, and Underline.

Icon #

CTA button with icon

Enable the icon option for more options like below.

  1. Icon Color: You can change the color of the Icon. By default, it is set to Black.
  2. Icon Size: You can change the color of the Icon. By default, it is set to 15.
  3. Item Spacing: You can control the space between the Icon and the Text of the Button.
  4. Choose Icon: You can upload any image as an icon for your “Text icon” element.
  5. Search Icon Library: There are plenty of Icons to choose from in the library.
  6. Icon Position: You can position the icon left or right to the text. By default, it is set to left.

Hover #

button hover

Turn the “Button Hover” option on to get more customizing features like below-

  1. Background Color: You can change the color of the Hover Background. By default, it is set to Blue.
  2. Text Color: You can change the color of the text of the Button. By default, it is set to Black.
  3. Icon Color: You can change the color of the Icon. By default, it is set to Black.
  4. Border Color: You can change the color of the Button. By default, it is set to Black.
  5. Border Size: You can control the size of the Border of the Button Hover. By default, it is set to 0.
  6. Scale: You can control the scaling of the Button on Hover. By default, it is set to 1.

Conclusion #

We hope this documentation has helped you understand the functionality of this Ninja Tables element. 

Let us know your thoughts and questions.

What are your Feelings