Realtify Button Widget

This widget allows you to add clickable buttons to your pages. Drag & drop the widget into your preferred placement and then configure your widget to the left.

Text- Here, you should enter the text that you will see on the button.

Link- Here, you should enter the link you would like the button to direct to. You can also choose to open in a new window and add nofollow link by clicking on the “link options” button.

Alignment- Here, you can select your preferred alignment of the button within the column you placed the widget.

Style Options:

In the style tab, you will find a few options to customize your RTP button.

Typography- Here, you will be able to adjust everything regarding the font of your text. You can choose:

-Font Family

-Font Size

-Weight (the level of thickness of the letters)

-Transform (letter cases)

-Style

-Decoration

-Line Height (the line spacing)

-Letter Spacing

Mouse Over- Here, you can choose to have a “normal,” mouse over effect, or a hover effect, in which case, you should set a hover animation.

Shape- Included in the button design is a graphic shape, and here you can adjust the color for the 1st half of the shape. If you would like no shape, simply set the shape to transparent in the color chooser.

Second Shape- Included in the button design is a graphic shape, and here you can adjust the color for the 2nd half of the shape. If you would like no shape, simply set the shape to transparent in the color chooser.

Hover Animation- If you have chosen a hover effect for your button, you can then choose what kind of animation you would like to occur when a mouse hovers over the button.

Text Color- Here, you can select the color of your text by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

Background Type- Here, you can choose whether to have a “classic,” background (solid) or a gradient background.

Background Color- Here, you can select the color of your background by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

2nd Background Color- If you have chosen a gradient background type, you can choose the second color by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

Angle- If you have chosen a gradient background type, you can choose the angle at which the gradient will appear. For example, 0 (degrees) would be directly underneath, 90 (degrees) would be directly from the left, 180 (degrees) would be directly from the top, and 280 (degrees) would be directly from the right.

Box Shadow- Here, you can adjust the shadow around the button. You can choose:

-Color

-Horizontal placement

-Vertical placement

-Blur effect

-Spread

-Position (outline or inset)