How to edit action buttons

In this guide, we’ll show you how to customize action buttons using Getsitecontrol’s built-in CSS editor.

We’ll cover different styling options and provide the necessary CSS code snippets to help you achieve the desired results. Feel free to use the menu on the right to skip to the section you need.

1. General instructions on the CSS editor

❗ Make sure to read the following instructions carefully if you are not familiar with CSS code. Please note that the recommendations below apply to all the button styling methods in this guide.

  1. In the tutorial below, we'll provide several CSS code snippets. You'll need to add these snippets to the CSS editor of your widget. To get started, open the widget in editing mode and find the CSS editor on the Design tab:

The CSS editor in the Design tab

  1. You can add new code snippets anywhere in the CSS editor, but make sure not to interrupt any existing lines of code there. To be safe, we recommend adding new CSS code at the very end.

Adding a code snippet to the CSS editor

  1. If you see a red X on the side, the CSS button is also red, and the platform doesn’t let you save the changes, something is wrong with the code you’ve added. Make sure you have not left out any part of it or added any characters by mistake.

Red X on the side of the CSS editor, red CSS button, and ‘Widget could not be saved’ error message

  1. Similarly, when you copy and paste the code from this guide or from anywhere else, make sure that no extra dots are automatically added to the code in the process. This can happen sometimes, and it will prevent the code from working. You can spot the unnecessary dots because they will appear in red and be marked with a red X on the side:

Red dot and red X on the side of the CSS editor

Now that you know the basics, let’s move on to action buttons.

2. Premise on action buttons

The .buttons .button class selector defines styles for all buttons.

For example, the following code changes the color of the text of all buttons to red:

.buttons .button {
    color: red;
  }

Note that in all case scenarios we used the primary button as an example.

To apply changes to buttons with specific classes (primary, secondary, or normal), specify the classes in the CSS code in the following form: .button.primary, .button.normal, and .button.secondary.

3. Rounding the corners of a button

Use the border-radius property to round the corners of the button. Below is the code you should add to the CSS editor of your widget:

.button.primary {
    border-radius: 50px;
  }

Here is what the result looks like:

Button with rounded corners

Adjust the radius value (px) however you prefer.

4. Changing the position and alignment of a button

Action buttons are grouped in a <div class=”buttons”> container.

Inspecting buttons container in DevTools

The flex-direction property defines the container's main axis: vertical or horizontal. The column value stacks the flex items from top to bottom. This is the default setting for most templates in Getsitecontrol.

By default, when the flex-direction is column, the buttons will be stretched out to the edges of their container (outlined in blue in the screenshot below):

Widget with buttons stretched out to the edges of the container

If you don’t want this to happen, add the align-items property and specify its value.

The align-items property allows you to define the alignment of the buttons: to the left, to the right, or centered.

When using this property, the buttons will only take up the space necessary to display the text they contain.

The center value aligns the buttons to the middle of the container:

.buttons {
    align-items: center;
  }

Centering the buttons

The flex-start value aligns the buttons to the left:

.buttons {
    align-items: flex-start;
  }

Aligning the buttons to the left

The flex-end value aligns the buttons to the right:

.buttons {
    align-items: flex-end;
  }

Aligning the buttons to the right

The row value for the flex-direction property stacks the buttons from left to right:

.buttons {
    flex-direction: row;
  }

Here is what it looks like:

Getsitecontrol template with buttons stacked in a row

In the following sections, you’ll find advanced options for action button positioning.

Making the button more prominent

If your buttons are stacked in a row and you want one of the buttons to take up more space within the container, you can either change its paddings or apply the flex-grow property. This property makes the button automatically fill the whole available space.

For example, this is the code to make the first button stretch and take up all the space left within the container:

.buttons {
    flex-direction: row;
  } 

  .button:nth-child(1){
    flex-grow: 1;
  }

For comparison, this is what the buttons look like before applying the flex-grow property:

Template with buttons in a row without the flex-grow property

And this is what the buttons look like after applying the flex-grow property:

Template with buttons in a row with the flex-grow property

If the available space changes — because you’ve changed the width of the widget, changed the widget’s paddings, or added a third button, for example — the size of the first button will be automatically adjusted.

Aligning a button with a form field

To align an action button with a form field, add a flex-direction property to the .form container, and specify a row value for it.

Here is the full code you should add to the CSS editor:

.form {
    flex-direction: row;
    align-items: flex-end;
  }

  .fields {
    margin-bottom: 0;
  }

This is the template before aligning the ‘Subscribe’ button with the email capture field:

Getsitecontrol email signup template before aligning button and field

And this is the template after applying the changes:

Getsitecontrol email signup template after aligning button and field

If you want to add space between the button and the field, add this snippet to the code:

.fields {
    margin-bottom: 0;
    margin-right: 20px;
  }

This is what the template will look like:

Adding a space between button and field

Feel free to adjust the width of the space by changing the value (px) of the margin-right property.

5. Resizing a button

There are two main methods to resize a button:

  1. Changing the button’s width and height
  2. Adjusting the paddings within the button.

Let’s discuss these options in more detail.

Changing width and height properties

You can set the value for the width and height properties both in pixels and in percentages:

.button.primary {
    height: 80px;
    width: 100%;
  }

This is what the button looks like if we increase both width and height properties:

Changing the height and width values of a button

Adjusting paddings within the button

Another way to adjust the size of a button is with the help of the button’s own paddings. The padding is the space between the content of the button (usually text) and its borders.

To apply this method, set values for the padding property as follows:

padding: 20px 35px 10px 35px;

Here is what the four values of the padding property represent:

  • The first value is for the top padding
  • The second value is for the right padding
  • The third value is for the bottom padding
  • The fourth value is for the left padding.

Here is the complete code snippet you should use:

.button.primary {
    padding: 20px 30px 20px 30px;
  }

For comparison, this is what the first button looks like before adjusting the paddings:

Adjusting the button’s paddings: before

And this is what the button looks like after adjusting the paddings:

Adjusting the button’s paddings: after

Feel free to adjust the numerical values for the paddings however you prefer.

6. Adding an image

You can add images or icons to the action buttons of your widgets to make them more appealing or easier to find. Free online services like Icons8 can provide you with images for your widgets.

Choose the desired image from the gallery and hit ‘Download’.

Download icon in the Icons8 gallery

Click ‘Link (CDN)’ and then hit ‘Copy HTML’ as shown below:

The ‘Link (CDN)’ section and ‘Copy HTML’ button

This is the tag you’ve just copied:

<img src="https://img.icons8.com/ios/50/null/download-from-cloud--v1.png"/>

You’ll only need the URL from it:

https://img.icons8.com/ios/50/null/download-from-cloud--v1.png

Now let’s proceed to add the image to the action button.

Adding an image to the right from the text

In this example, we are adding the image to the right side of the button. To do that, increase the right-side padding to make room for the image using the padding-right property.

Then, use the background-image: url(“your url”); property to add the image. Swap ‘your url’ with the image URL that you got earlier.

Here is the complete code snippet:

.button.primary,
  .button.primary:hover {
    padding-right: 60px;
    background-image: url("https://img.icons8.com/ios/50/null/download-from-cloud--v1.png");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
  }

Adding an image on the right side of the text

Apply the same method to add an image on the left side of the text.

In the following section, we’ll cover advanced options to make the image fit better within the button.

Advanced options: using supporting properties

Let’s take a look at the supporting properties from the example above.

The background-size property allows you to adjust the size of the image and how it fits within the button.

Using the background-size: cover property, you can stretch the image to cover the whole width of the element, i.e. the button.

Using the background-size: contain property, you can make the image fit in the available space on the button.

If needed, you can set up a numerical value in pixels (px) for this property:

background-size: 30px auto;

The first value in the code (40px) defines the width of the image, and the second value (auto) defines the height.

Resizing the image using the background-size property

The background-position property allows you to manage the position of the image.

Not only can you set the right, left, or center values for this property, but you can also specify the paddings for each side. For example:

background-position: top 5px right 15px;

Positioning the image using the background-position property

Feel free to adjust the numerical values to suit your needs. It may be necessary to adjust the padding-right property value as well.

Adding an image without text

If you want to have just an image with no text on your action button, proceed in the following way.

From the Design tab of the widget editor, click on the action button to open its settings and delete the text.

Notice that a default image of a paper plane appears on the button when you delete the entire text from it:

Deleting the text from the button

Next, open the CSS editor.

First, let’s hide the default image by adding display: none to the svg element, which is expressed under the .button.primary.icon classes.

Proceed to adjust the width and height of the image using the corresponding properties, if necessary (see previous section).

Here is the complete code you should add to the CSS editor:

.button.primary.icon {
    min-width: 100px;
    height: 56px;
    background-image: url("https://img.icons8.com/ios/50/null/download-from-cloud--v1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;

    svg {
      display: none;
    }
  }

Here is the final result on the template:

Adding an image with no text to a button

❗ Make sure to check what the image looks like when hovered over or clicked. Some effects may make the image less visible and require adjustments.

7. Customizing a button individually

To edit a specific button from a set of buttons, use an nth-child(n) pseudo-class in your CSS code.

For example, if you have three buttons and want to round the corners of the second one, use the following code:

.button:nth-child(2) {
    border-radius: 50px;
  }

Rounding the corners of the second button only

To apply the same style to the third button, group the selectors into a comma-separated list:

.button:nth-child(2),
  .button:nth-child(3) {
    border-radius: 50px;
  }

Rounding the corners of the second and third button

You can use this method to apply any changes to specific buttons in your widget.

8. Changing a button’s color

In the Theme section, you can change the color of the primary button using the built-in color controls.

This is what the color change looks like on the Bold theme (default) featuring outlined buttons with a transparent background:

Changing the color of a primary button with the Bold theme

This is the result on the Standard theme featuring full-colored buttons instead:

hanging the color of a primary button with the Standard theme

❗ If you have more than one primary button, the color change will be applied to all primary buttons in the widget:

Changing the color of primary buttons in a widget

In the next sections, we’ll cover advanced options for color editing.

Changing the color of the button’s background (Bold theme)

To change the color of the button’s background in the Bold theme, use the background-color property. Here is the code you should add to the CSS editor of your widget:

.button.primary {
    background-color: #fbbf2e;
  }

This is the result on a widget with the Bold theme:

Changing the background color of a primary button with the Bold theme

Feel free to adjust the color code depending on your preferences. You can use the following formats to express the color property:

  • Color names: red, aqua, etc.
  • Hex color codes: #00FFFF or #0FF, as in the example above
  • RGB and RGBa color values: rgb(0, 255, 255), rgba(0, 255, 255, .5), or rgba(0, 255, 255, 50%)
  • HSL and HSLa color values: hsl(180, 100%, 50%) or hsla(180, 100%, 50%, .5).

Changing the color of a specific primary button

To apply color changes to a specific primary button only, add the following code to the CSS editor:

.button.primary:nth-child(2) {
    background-color: silver;
  }

Here is the result on the widget:

Changing the color of a specific primary button

Changing the color of secondary and normal class buttons

To change the color of a secondary or normal class button, use the .button.normal and .button.secondary classes.

Here is an example of code to change the color of a normal button:

.button.normal {
    background-color: #fbbf2e;
  }

Here is the result on a widget:

Changing the color of a normal class button

As mentioned above, feel free to adjust the color as you prefer.

And that concludes our list of common action button edits. If you haven’t found the solution you were looking for, feel free to reach out to our Support Team at any time.

Browse by category