How to edit action buttons?

1. Creating a rounded corner button

Use the border-radius property to round the corners of the button outer border edge. You can adjust the radius using pixels or percentages.

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

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

2. Customizing a button individually

The styles in the previous section are applied to all the buttons with the .button.primary class. To target a specific primary button, use an nth-child(n) pseudo-class. For example, if you want to round the corners of the second primary button, you should use the following code:

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

If you want to apply the same style to the third primary button, you should group the selectors into a comma-separated list.

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

3. Positioning and alignment

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

You can use flex container properties to position the buttons.

The flex-direction property defines the main-axis of the container: vertical or horizontal. For example, the default row value stacks the items from left to right. Use the column value to stack the flex items from top to bottom.

When flex-direction is column, the buttons will be stretched out to the edges of their container. To prevent it, use horizontal alignment.

The align-items property defines the behavior of the buttons being laid out along the cross-axis, which goes perpendicular to the main-axis. In our case, the main-axis goes from top to bottom, hence, the cross-axis goes from left to right.

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

.buttons {
  flex-direction: column;
  align-items: center;
}

You can use other values as well. For example, the flex-start value will align your buttons to the left.

The flex-end value will align the buttons to the right.

Here are some advanced options for action buttons positioning.

Flex-grow property

If 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 defines the ability of a button to grow if necessary. Let’s say, you want the first button to take up the whole available space. In this case, you need to use the following:

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

Before applying the flex-grow property.

After applying the flex-grow property the Sign up button took up the available space.

If you add the third button, reduce the widget width itself, or increase the widget paddings, the amount of the available space, as well as the size of the first button, will be reduced.

4. Button sizing

You can enlarge the buttons by changing the element's width and height or by managing the paddings within it. Let’s consider both variants.

Width and height properties

The value for these properties can be set as in pixels, as well as in percentages:

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

Paddings

Buttons size can be also adjusted with the help of the paddings from their content to borders. To do this, use the padding property.

padding: 20px 35px 10px 35px;

Here you can see four values of the padding property. Each of them is responsible for the padding from the text border to the button border.

The first value means the range between the upper borders, the second — the range between the right ones, the third — the range between the lower borders, and the forth — the range between the left ones. In other words

padding: {padding-top} {padding-right} {padding-bottom} {padding-left};

If you need to change the value of particular sides, you can rewrite the property as the following:

.button.primary {
  padding-top: 20px;
  padding-right: 35px;
  padding-bottom: 10px;
  padding-left: 35px;
}

Let’s use the shortened form:

.button.primary {
  padding: 20px 35px 10px 35px;
}

In this case, you get the following:

In other words, the padding property can visually change the position of the text within the button.

5. Adding an image

Icons8 can provide you with images for your widgets.

Choose the image and click Embed HTML. You need the link from the src element.

In other words, from the tag

<img src="https://img.icons8.com/carbon-copy/100/000000/enter-2.png"/>

you’ll need only this part

https://img.icons8.com/carbon-copy/100/000000/enter-2.png

As the chosen image is black, let’s change the button color. On the Appearance tab of your widget, go to the Theme section, and choose the necessary color for the primary button.

Image insertion from the right

Let’s take the case when you need to add the image on the right side of the button text. Then you need to enlarge the right padding using the padding-right property.

To add the image itself, use the background-image: url(‘your url’); property. Instead of “your url”, put the image code that you got earlier.

.button.primary,
.button.primary:hover {
  padding-right: 55px;
  background-image: url("https://img.icons8.com/carbon-copy/100/000000/enter-2.png");
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

Supporting properties

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

The background-size property allows managing the background image.

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

Using the background-size: contain property you can embed the whole image in the element. If needed, you can set up the number of values for these properties:

background-size: 30px;

The background-position property allows managing the position of an element. You can not only set the right, left or center values but also to specify the particular paddings for each side, i.e.

background-position: top 10px right 40px;

To illustrate it let’s change the button height and width:

width: 100%; 
height: 80px;

The background-repeat: no repeat; property is responsible for the image duplication. It can be duplicated:

by x or y axis:

background-repeat: repeat-x;

or

background-repeat: repeat-y;

by both axes:

background-repeat: repeat;

they can be not duplicated at all:

background-repeat: no-repeat;

Adding an image without text

Let’s say that you want to get rid of the button text and add only an image there. To do that, go to the Content tab of your widget, and in the Buttons section, remove the text.

Then come back to the Appearance tab, in the CSS-editor.

First of all, let’s hide the default image with the help of the color: transparent; property-value and adjust the width and the height of the image using the width and height properties.

All the properties should be prescribed to the svg element which is contained in the button with the .button.primary.icon classes. If needed, you can remove the inner paddings using padding: 0;.

.button.primary.icon {
  padding: 0;

  svg {
    width: 50px;
    height: 50px;
    color: transparent;
    background-image: url("https://img.icons8.com/carbon-copy/100/000000/enter-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}