How to edit or replace close and back buttons?

How to edit or replace close and back buttons?

Each widget has at least one button which you might want to modify. In this guide, we will tell you how to customize close and back buttons of your widgets using our CSS editor. Let’s dive into it!

1. Change color

2. Change size

3. Change position

4. Change opacity

5. Hide an element

6. Replace with a text

7. Replace with an image

1. Change color

To change the close button color you need to transform the background-image value for the “smth:before” pseudo-element. “smth” may stand as for the close button as well as for the back button.

Copy the necessary code and change the stroke parameter. In double quotes write the name of the desired color or use the rgb/rgba format, i.e. ‘ stroke=“rgb(155, 15, 155)”.

Example code for the close button

.close:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M1.458 1.458l21.084 21.084m0-21.084L1.458 22.542" /></svg>');
}

Changing the color in the CSS editor

Example code for the back button

.back:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="rgb(155, 15, 155)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 11" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M1 5.5h15M5.5.55L.55 5.5l4.95 4.95"/></svg>');
}

Changing the color  of the back and close buttons in the CSS editor

2. Change size

To change the button size, set the necessary height and width to the “before” pseudo-element. Remember that the button is square, so the values of height and width should be equal to each other.

.close:before {
  width: 20px;
  height: 20px;
}

Changing  width and height in the CSS editor

3. Change position

To change the position of the close button, use the following code:

.close{
  margin-right: 5px;
  margin-top: 45px;
}

Moving the close button  to a new position in the CSS editor

If there are several pages in your widget, don’t forget to change the position of the back button. Here is the code you need to use:

.close,
.back {
  margin-right: 10px;
  margin-top: 50px;
}

Moving the close button along with the back button to a new position in the CSS editor

You may want to hide the back button by adding the following code:

.back {
  display: none;
}

Code to remove the close button is added in the CSS editor

To move the close button to any corner of your widget, use property pairs “top/bottom” and “left/right”. Set the necessary value to the first property and add the value “auto” to the other. Even if you resize your widget, the button’s position will be automatically adjusted.

A hint: place the back and close buttons at different corners. Change the position of the back button using the code below.

.back {
  left: 10px;
  right: auto;
}

The close button does not require any changes.

Moving the back button to the left in the CSS editor

To move the close button to the top left corner along with the back button, change the values of the “left” property. For example, add the property “left: 10;” to the close button and the property “left: 30px;” to the back button.

.close {
  left: 10px;
  right: auto;
}

.back {
  left: 30px;
  right: auto;
}

Moving the close and back buttons to the left in the CSS editor

4. Change opacity

Add the ”opacity” property to set the transparency level for the element “.close:before”. The value of opacity lies between 0 and 1, where 0 represents high transparency and 1 represents low transparency. In the example below the close button will be fully opaque.

.close:before {
  opacity: 1;
}

Adding low opacity in the CSS editor

Add the “:hover” pseudo-class to change opacity when you mouse over the close button. According to the code below the close button will be transparent when you hover your mouse over it.

.close:hover:before {
  opacity: 0.2;
}

Adding high opacity in the CSS editor

5. Hide an element

To hide an element you should add “display:none” to the necessary one.

.close {
  display: none;
}

Hiding the close button in the CSS editor

Please note that here you should add the property to the .close class element, not to its pseudo-element.

6. Replace with a text

If you want to replace the “X” sign with a text, i.g. write “Close” instead of “X”, you should add the necessary word to the “content” property. Don’t forget to remove the “X” image by adding the “none” value to the “background-image” property.

We also recommend adding the “auto” value for the width and height of the element to display the text correctly within the widget boards.

Remember about pointing effects. Initially, the “X” sign was turning when a visitor moused over it. To remove this effect you need to discard the “transform” property.

The final version of the code you can find below:

.close:before {
  content: 'Close';
  width: auto;
  height: auto;
  background-image: none;
}
.close:hover::before {
  transform: none;
}

Now the text is getting darker when a user mouses over it.

Replacing the close button with text in the CSS editor

As an alternative, you can create an additional button with the necessary text and set it up to close the widget. If needed, you can hide the button as well.

Adding a close action to a secondary button

7. Replace with an image

Replace the default icon with a custom image (get images from Icons8, for example). Compress the code of the image before adding it into the CSS editor.

<svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title/><path d="M64,0a64,64,0,1,0,64,64A64.07,64.07,0,0,0,64,0Zm0, 122a58,58,0,1,1,58-58A58.07,58.07,0,0,1,64,122Z"/><path d="M92.12,35.79a3,3,0,0,0-4.24,0L64,59.75l-23.87-24A3,3,0,0,0,35.88,40L59.76,64,35.88,88a3,3,0,0,0,4.25, 4.24L64,68.25l23.88,24A3,3,0,0,0,92.13,88L68.24,64,92.13,40A3, 3,0,0,0,92.12,35.79Z"/></svg>

Insert the code after “background-image: url('data:image/svg+xml; utf8,”. Don’t forget to add “ '); ” in the end. Set height and width on your image (see the section 2).

Here is a code example:

.close:before {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title/><path d="M64,0a64,64,0,1,0,64,64A64.07,64.07,0,0,0,64,0Zm0, 122a58,58,0,1,1,58-58A58.07,58.07,0,0,1,64,122Z"/><path d="M92.12,35.79a3,3,0,0,0-4.24,0L64,59.75l-23.87-24A3,3,0,0,0,35.88,40L59.76,64,35.88,88a3,3,0,0,0,4.25, 4.24L64,68.25l23.88,24A3,3,0,0,0,92.13,88L68.24,64,92.13,40A3, 3,0,0,0,92.12,35.79Z"/></svg>');
}

Replacing the button with an image in the CSS editor

If your widget consists of several pages, you can apply the same styling to the back button by addressing the element “.back:before”, or hide the button (see the section 5).

Here’s an alternative way to change the image. Choose an image on Icons8.com and hit “Embed HTML”.

Selected ‘Embed HTML’ button on  Icons8.com

Here’s the code you need.

Selected code on Icons8.com

Paste the image’s URL into the brackets of the “background-image” property:

background-image: url('https://img.icons8.com/material/24/000000/close-window--v1.png');

Add the property “background-size: contain;” to resize your image and make sure it’s fully visible.

.close:before {
  width: 20px;
  height: 20px;
  background-image: url('https://img.icons8.com/material/24/000000/close-window--v1.png');
  background-size: contain;
}

You can also specify custom “width” and “height” for your image.

Underlined image code in the CSS editor

Browse by category