X Close Button Only Using CSS

X close button only using css

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>

Center CSS X button

Just add flexbox to the .close class and you're ready to go

.close {
  position: relative;
  width: 100%;
  height: 60%; // 100% means that both lines will take the entire space
  display: flex;
  align-items: center;
  justify-content: center;
}

The width of the .close:before, .close:after CSS rule is actually letting both lines "expand" horizontally, starting from the center.

But, as they are being rotated, their starting position is not the same as if they were not rotated, so that's why their alignment becomes non-centered. You can inspect the item and you will see that the actual box has an empty space, which is the "rotated width" empty space.

Consider a x = 0 coordinate (0px from CSS box left margin) which is the horizontal starting point of the CSS box; rotating elements will make content to start at x = ? (usually half of the content width)

You could solve this issue also by setting a negative margin-left with its value being half the width, but using flexbox will require much less maintenance (just imagine working with UI/UX guys telling you to change its dimensions)

Pure css close button

I spent more time on this than I should have, and haven't tested in IE for obvious reasons. That being said, it's pretty much identical.

http://jsfiddle.net/adzFe/14/

a.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";
}

html/css - how to put close button inside round background

You can put all the css in .closebtn, set line-height to 25px and text-align to center.

.closebtn {
    color: #535353;
    font-size: 30px;
    top: 5px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #bbb;
    border-radius: 50%;
}

<div class="messages">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    </div>

Displaying close (X) button in corner of image in css grid

To get the 'X' in the top right hand corner you could do:

.AClass{
    right:0px;
    position: absolute;
}

<form action="/destroyImage" method="POST">
    <div style="position:relative;">
        <button type="submit" class="close AClass">
           <span>×</span>
        </button>
        <img src="/pub/myimage123.jpg"/>
    </div>
</form>

To get a better cross I would suggest using Font Awesome or some variant of that.

Unicode character for X cancel / close?

✖ works really well. The HTML code is ✖.

An alternative is ✕: ✕

HTML/CSS close button overlapping right/upper corner

I guess this is what you looking for:

Just add position:absolute; instead relative

#container {  width: 80%;  /*border-radius: 25px;*/  border: 2px solid Black;  padding: 15px 15px 15px 15px;  margin: 20px 20px 20px 20px;  background: #A4D3EE;  overflow: visible;  box-shadow: 5px 5px 2px #888888;  position: relative;}
#x {    position: absolute;    background: red;    color: white;    top: -10px;    right: -10px;}

<div id="container">        <button id = "x">            X        </button>    Text Text Text    Text Text Text    Text Text Text</div>

X Close Button Only Using CSS