Skip to main content
All CollectionsMastering the Editor
How do I customize a button?
How do I customize a button?

Learn what a Call-to-Action button is and how to customize it.

Akshaya Kumar avatar
Written by Akshaya Kumar
Updated over a year ago

Call-to-action (CTA) buttons are the buttons you use on your pages to guide users toward your end page. A user needs to click on the button in order to take the action you want them to take.

With a button in Cleverstory, you can redirect it to a URL or anchor it to a section of a page.

In this article, you will learn how to customize a button.

Click on the + icon on the top left to access the element palette that allows you to add a button to the page. Head to the button option and add it to the page.

Once you’ve added the button to the page, choose the paintbrush icon to customize the button.

The button’s appearance can be based on two states:

  1. Regular: This state will be the primary look of the button at all times. You can customize the color, border, and text style in this state.

> Color: You can change the colour of the button and the text on the button by clicking on the option and adding your choice of color to the Color Picker.

> Border: If you want to make significant changes to the button shape, you can do the same by altering the border.

Choose a color and determine the Border (Corner)Radius and Stroke Width within this option.

  • Stroke Width: The width of the button automatically resizes as you adjust on the scroll bar.

  • Corner Radius: The shape of the button can be changed based on the corner radius. By default, the button is in the shape of a rectangle. Input a value in each corner radius box to smoothen the edges. A higher value indicates a smoother curve.

> Text: The appearance of the text on the button can be altered under this option. You can change the font, Text size, Line and Character Spacing.

> On Hover: The appearance of the button changes upon hovering. You can make color changes to the button and the text, and make significant changes to the button shape by altering the border.

> Color: You can change the colour of the button and the text on the button by clicking on the option and adding your choice of color to the Color Picker.

> Border: For hover, you can choose a different color for the border. The base of the button stays the same as in the Regular style.

Annddd…. You’re all set to customize a button.

Still got queries? Reach out to support@paperflite.com, and we’ll be happy to assist you.

Did this answer your question?