How to edit action buttons

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:

2. 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.

3. 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.

4. 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:

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:

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.

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):

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;
  }

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

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

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

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

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:

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:

And this is what the buttons look like after applying 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:

And this is the template after applying the changes:

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:

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:

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:

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

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’.

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

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;
  }

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.

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;

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:

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:

❗ 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;
  }

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;
  }

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:

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

❗ If you have more than one primary button, the color change will be applied to all primary buttons in the 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:

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 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:

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.