This tutorial will show how to turn a text link inside a text element to a button with hover effect. We will use a text element on the page "index.html" from the website created in the Getting Started Tutorial as an example. You can create a new website from the "Sample Template" and use it for this tutorial.
Open the website from the Getting Started Tutorial or the one created from the "Sample Template".
Open the page "index.html". We are going to turn the link "Read more >>>" of the following text element to a button.
Clicking on this text element, the "Page / Element CSS Styles" panel will show the following styles that are applied to this element. We will need the style "read-more-link" later to get the color of the link.
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Click on the "Presets" button on the right of the "CSS Style Editor" to open the Preset Styles Dialog and select the two styles as shown below:
Click on the OK button to add these two preset styles to the CSS Style Editor.
Select the style "read-more-link" and click on the "Text" tab on the left. Check out the color of the text.
Copy the color #79AB36.
Select the style "text-link-button". Click on the "Text" tab on the left. Change the color from #225887 to #79AB36.
Click on the "Borders" tab. Change the color of the borders from #225887 to #79AB36.
Select the style "text-link-button-hover". Click on the "Background" tab on the left. Change the color from #225887 to #79AB36.
Click on the OK button to save the changes.
The two new styles will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
Click on the following text element.
The styles applied to this element will be shown in the "Page / Element CSS Styles" panel. Select the styles "read-more-link" and "read-more-link-hover" and then click on this button . These two styles will be removed.
To apply the news styles to the text element. Drag the styles "text-link-button" and "text-link-button-hover" from the "Available CSS Styles" and drop them to the element on the page. However, as this text element is already selected, you can just drag the styles "text-link-button" and "text-link-button-hover" and drop them to the "Page / Element CSS Styles" panel above. Both will result in the following:
You will see the styles of the text link is gone and the new styles are not applied because the link is inside a paragraph. This setting of these two new styles is to void applying them to links inside paragraph and headings. Now double-click on the following text element to open it in the Text Element Editor.
Then click on this button on the toolbar to show the block formats. Click on the block that the link is in.
Select "Text" from the drop down menu as shown below:
The block with a letter "P" where the link is in is gone after this and the styles are now applied to it like the following:
Click on the "Save and Close" button to save the changes.
Now the "Read more >>>" link will look like this
and when hover:
The size of the button is determined by the padding values that are set in "Padding" section of the "Box" tab. You can adjust the size of the button by changing the padding values.
If you want the button to have a fixed size, deselect all the options of the "Padding". Click on the "Block" tab and set the "Width" and "Height" values. To center the text, click on the "Text" tab and set the line height to the same value as "Height" and select the option "Alignment" and select "center" from the drop down menu.
If you want the button to be a rounded rectangle, you can select the style "text-link-button" in the CSS Style Editor. Click on the "Borders" tab on the left and set the values in the "Radius" section, for example 10 px, like the following.
You can also change it into a gradient button by clicking on the "Background" tab and select the option "Gradient" and click on the "Edit Gradient" to customize the gradient. For details, you can check out point 4 to 5 of this tutorial "Add gradient background to a text element using CSS".
on the toolbar.
. These two styles will be removed.
on the toolbar to show the block formats. Click on the block that the link is in.
