How To Use Button Widget Of EnterAddons

Button widget allows you to display text with a background image or a background color. Also, you can set link address for navigation in the button. You can easily build this widget with EnterAddons

Using Button Widget :

You can see the below video to get an insight into how you can use the Button Widget, Or you can follow the documentation whichever you find convenient.

Firstly, select the Button Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Step1

Secondly, from ‘Content’ Section you will get Button Content and Button Icon

After that, from Button Content section you can add button-text and link ( for setting address ).

Then, from Button Icon section you have Show icon ( show / hide ) with switch option, and also you can change icon-direction, icon-position, before-text-icon and after-text-icon respectively, and that is given below.

Step2

From ‘Style’ section you can stylize the widget. You will get the Button Style, Button Text Style, Button Small Text Style, Icon and Hover Effect section respectively.

After that, from Button Style section you can add button width, button height, button alignment, text alignment, margin, padding, border-type, border-radius, box-shadow and background-type respectively, and that is given below.

Moreover, from this section you can see ‘HOVER’ view also.

Then, from Button Text Style section you can add margin, padding, border-type, border-radius and box-shadow and background-type respectively and that is given below.

Moreover, from this section you can see HOVER effect also.

After that, from Small Text Style section you can add typography, text color, margin and padding respectively.

Moreover, from this section you can see HOVER effect also.

After that, from Icon section you can add icon-color, icon-size, icon-container-width, icon-container height, margin, padding, border-type, border-radius, box-shadow and background-type respectively, and that is given below.

Moreover, from this section you can see HOVER effect also.

Then, from Hover Effect section you can select different type of hover effect .

After that, from Hover Effect section you can select Interactive Background hover effect form Hover Effect options, and that is given below.

Step3

Finally, after finishing all the editing, click update, then click on ‘Preview > Preview in new tab’ to see your work live.

That’s it.