Changing the Design of a Button

To stick to the overall design of your site, we recommend to change the type and the layout of the buttons in the settings.

Follow the instructions below to change the design of a button.

Step 1. Changing the design of a button in the global settings

1. For that, click on the Site Style icon in the toolbar in the editor:

2. Navigate to the Buttons tab and select one of the ready-made options in the gallery:

3. If you want to customize the layout of the button yourself, hover over the current button style and click Edit:

4. In the new window, select the Primary or Secondary button type and click on the one you need to edit:

Tip: here you can also change the font and formatting used for the text in the buttons:

5. After choosing the button type in the new window, you can change the color of the fill, text and borders of the button:

Important: don't forget to customize the button design for a dark background separately:

6. After finalizing the design, click Done.

Step 2. Changing the style of the particular button

1. To change the design of a specific button on the site, click on it and click on the "gear" to access its settings:

2. Open the Style tab in a new window and select the needed type (Primary, Secondary, or Link), style and size of the button:

Tip: choose the "Primary" button for a major call-to-action like "Sign up", etc. Use "Secondary" type of a button for a minor call-to-action, e.g., "View portfolio". Use "Link" buttons to show additional info — for instance, "Learn more".

3. In addition, you can add an icon to the button and also set its alignment:

4. Don't forget to publish your site for the changes to appear live.

Note: decide what happens when a button is clicked by adding a link to it according to the instructions in the article Adding links to elements.

• Related Articles

• Adding a Button

  Buttons can be used for site navigation and as call-to-action. You can add a button to almost any block in the editor. Adding a button 1. To add a new button, hover over the block and click on the "plus" sign where you'd like to place it: 2. Choose ...

• Deleting a Button

  In most of the blocks a button is a separate element, which you can delete without affecting the block as a whole. Deleting a button 1. Hover over the button in the block and click on the three dots: 2. Choose Delete in the drop-down list: 3. If you ...

• Changing the Design of the Linked Text

  You can change the color, font, size and formatting of the link added to the text on your SiteCliq site. Changing the design of the linked text 1. You can adjust the linked text with the help of a pop-up menu. For that, select the needed text and ...

• Changing the Design of a Block

  As soon as you add a block, you can start editing it to adjust the layout and match it to the overall design of your site. Most of our blocks are easily customizable, so you can change the settings of each particular element in them — for example, ...

• Adding a "Scroll to Top" Button

  A "scroll to top" button is a must-have element on the sites that have more than 3 blocks. It provides visitors who land on the site with a pleasant navigation experience and makes it easier for them to surf through your website. Here's how the ...