How to edit buttons

Buttons are an engaging way to get your visitor to actively engage with you, these include; links to pages, anchors, URLs, phone numbers, and emails with hover effects​, etc.

The follows shows you how you can edit the buttons your designer will create for your website.


A very basic default button might look like this:

1. Change text

Click on the button in your CMS studio to open the Properties Panel to begin editing your button. 

In the field "Button Text" write the text that you what to appear in the button.

To set the appearance of the text, choose an existing text style from the "Text Style" dropdown.
These styles are your paragraph styles that you have already created.​

To set the appearance of the text, choose an existing text style from the "Text Style" dropdown.

These styles are your paragraph styles that your designer has already created.​

If you want to change the colour of the text on rollover, do it here and add a text shadow if you wish with this checkbox.​

2. Add link to button.

At the bottom of the Properties Panel you'll find the "Link To" dropdown. Choose between page, link, anchor, or none (if you wish only to use the hover effect).

If choosing "Link" you can mark the checkbox "Open Link in New Window".​

3. Choose colours and hover effect.

In the middle of the Properties panel are the options for hover effects. As you try different effects, check them in Preview mode.

Note that every kind of button has slightly different settings options.

"Background or Border Transition" - This dropdown will set the inner animation transition for the colours only. Choose "None" if you wish to have no animation.

"Button Effect" - This dropdown will set the animation for the entire button. Choose "None" if you wish to have no animation.

"Transition Speed" - Set the duration of the transition.​

"Background Colour": The colour in the beginning of the transition.

"Background Transition Colour": The colour in the end of the transition.

"Border Transition Colour": If you choose an effect that involves border, choose its colour here.

"Border Transition Width": The width of the border that appears if you choose a border effect.​

4. Check your work.

Go to "Preview" mode to check you're happy with what you've created and if so, "Publish"to make it live on your website


Here to ensure nothing stops you from succeeding.

Simple is as simple does, with our easy step by step, code-free knowledge base to help you edit your website.​

Credits: Website illustrations courtesy of Freepik from

Powered By:

website design, logo design, branding, brands, low cost print, cheap printing, social marketing,


Thank You!

Your message has been

successfully sent.


This field is required.


This field is required.

Website address

This field is required.

A brief outline of what you need, your market and any issues

This field is required.

Challenge Us


To Re-Energise Your Business

It costs nothing to ask. Simply add your details below and we'll get back to you with few ideas that could add the spark your business needs.

Let's talk.

Tell us what you think, share with others, see our latest offers and keep up to date with all the latest info that could help your business and your brand.

Join Us, Like and Share

Social Media /

And if you still need any more proof of our passion for big ideas, great design and the results they bring, then please check out some of our testimonials and our portfolio examples, because we truly understand the difference it can make to your brand and your sales. 

Stand Out