X close button only using css

Question

How to make a cross (X) only in css3, to use as a close button ?

I\'ve been searching since long time, i cannot found how.... When i look at source code on website u

Answer 1

Main point you are looking for is:

.tag-remove::before {
  content: 'x'; // here is your X(cross) sign.
  color: #fff;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

FYI, you can make a close button by yourself very easily:

#mdiv {
  width: 25px;
  height: 25px;
  background-color: red;
  border: 1px solid black;
}

.mdiv {
  height: 25px;
  width: 2px;
  margin-left: 12px;
  background-color: black;
  transform: rotate(45deg);
  Z-index: 1;
}

.md {
  height: 25px;
  width: 2px;
  background-color: black;
  transform: rotate(90deg);
  Z-index: 2;
}

<div id="mdiv">
  <div class="mdiv">
    <div class="md"></div>
  </div>
</div>

Answer 2

Here's a good drop-in solution for perfectly centered circular X icon buttons

• Using only CSS
• Not relying on a font
• The thickness and length of the tines of the X can be configured without affecting centering, using width and height in the pseudo element rule .close::before, .close::after
• Screen reader support using aria-label
• Works on a light or dark background by using transparent grays and currentColor to adapt to the current text color specified on the button or an ancestor.

.close {
    vertical-align: middle;
    border: none;
    color: inherit;
    border-radius: 50%;
    background: transparent;
    position: relative;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}
.close:focus,
.close:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.5);
}
.close:active {
    background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 4px;
    background-color: currentColor;
}
.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

<div style="padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>
<div style="background: black; color: white; padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>
<div style="background: orange; color: yellow; padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>