How to edit or replace close and back buttons?

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

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

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

3. Change position

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

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

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

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

.back {
  display: none;
}

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.

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

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

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

5. Hide an element

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

.close {
  display: none;
}

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.

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.

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

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

Here’s the code you need.

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.