Pure CSS Close Button

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>

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: "×";
}

How to add a Close button into a pure CSS sliding down feature?

You need to move the <input> further up since your CSS is using the "+" selector.

You may also use ~ instead of +.

A possible solution would be like this:

<h2>Title</h2>
<hr>
<div>
  <input name="check" id="check" type="checkbox">
  <label for="check"></label>
  <hr>
  <div class="hiddentext">
Hidden message
  </div>
</div>

 input {
    display: none;
  }

  label {
    margin: 0rem 0rem;
    /*spacing between button and divider*/
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1rem 0.5rem 0rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    -webkit-transition: background-color 0.2s, color 0.2s;
    width: 100%;
  }

  label:hover {
    color: rgba(0, 0, 0, 0.3);
  }

  .hiddentext {
    -webkit-transition: height .3s ease;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background: rgba(255, 255, 0, 1);
    margin-top: 10px;
  }

  input:checked ~ .hiddentext {
    height: 800px;
    max-height: 200px;
  }

  #check {
    position: absolute;
    appearance: none;
    cursor: pointer;
  }

  #check + label {
    position: absolute;
    cursor: pointer;
    background: #ff00ff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 500ms ease;
  }

  #check + label:after {
    content: "Open"
  }

  #check:checked + label {
    background: #00ff00;
  }

  #check:checked+label:after {
    content: "Close"
  }

Single button to show/hide element with pure CSS

This could help

.details,.show,.hide:target {  display: none;}.hide:target + .show,.hide:target ~ .details {  display: block;}

<div>  <a id="hide1" href="#hide1" class="hide">+ Expand</a>  <a id="show1" href="#show1" class="show">- Expand</a>  <div class="details">    Content goes here.  </div>  </div>

CSS: Center the splash screen close button

centering of elements in the screen can be done with the following CSS. If you place it insode a parent element, make sure it has a position property in the CSS.
You can play with the top and bottom property settings to position it.

.screenbutton {  width: 120px;  height: 120px;  border-radius: 50%;  background-color: lightblue;  position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0;  margin: auto;}

<div class="screenbutton"></div>

---

Related Topics