XXX

index.html

<h1>X</h1>

<ul>
  <li>Large</li>
  <li>Medium</li>
  <li>Small</li>
  <li>Tick Mark</li>
</ul>

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

<hr>

<h1>Checkmark</h1>

<ul>
  <li>Large</li>
  <li>Medium</li>
  <li>Small</li>
  <li>Tiny</li>
</ul>

<ul>
  <li class="ele">
    <div class="checkmark large"></div>    
  </li>
  <li class="ele">
    <div class="checkmark medium"></div>    
  </li>
  <li class="ele">
    <div class="checkmark small"></div>    
  </li>
    <li class="ele">
    <div class="checkmark tiny"></div>    
  </li>
</ul>

script.js

          
$(document).ready(function () {
  $('.x.grow').hover(function () {
    $(this).hide();
    $(this).toggleClass('small large');
    $(this).show();
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

h1 { 
  display:block;
  text-align:center;
  color:#777;
}

.ele div.x {
-webkit-transition-duration:0.5s;
  transition-duration:0.5s;
}

.ele div.x.slow {
-webkit-transition-duration:1s;
  transition-duration:1s;
}

ul { list-style:none;float:left;display:block;width:100%; }
li { display:inline;width:25%;float:left; }
.ele { width:25%;display:inline; }
.x {
  float:left;
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#CCC;
  border-radius:2px;
  border:solid 2px #FFF;
  transition: all .3s ease-out;
  cursor:pointer;
}
.x.large { 
  width:30px;
  height:30px;
}

.x.medium {
  width:20px;
  height:20px;
}

.x.small {
  width:10px;
  height:10px;
}

.x.switch {
  width:15px;
  height:15px;
}
.x.grow {
  
}

.x.spin:hover{
  background:#BB3333;
  transform: rotate(180deg);
}
.x.flop:hover{
  background:#BB3333;
  transform: rotate(90deg);
}
.x.t:hover{
  background:#BB3333;
  transform: rotate(45deg);
}
.x.shift:hover{
  background:#BB3333;
}

.x b{
  display:block;
  position:absolute;
  height:0;
  width:0;
  padding:0;
  margin:0;
}
.x.small b {
  border:solid 5px rgba(255,255,255,0);
}
.x.medium b {
  border:solid 10px rgba(255,255,255,0);
}
.x.large b {
  border:solid 15px rgba(255,255,255,0);
}
.x.switch b {
  border:solid 10px rgba(255,255,255,0);
}

.x b:nth-child(1){
  border-top-color:#FFF;
  top:-2px;
}
.x b:nth-child(2){
  border-left-color:#FFF;
  left:-2px;
}
.x b:nth-child(3){
  border-bottom-color:#FFF;
  bottom:-2px;
}
.x b:nth-child(4){
  border-right-color:#FFF;
  right:-2px;
}

.checkmark {
  display: block;
  margin: 0 auto;
  text-align:center;
}
.checkmark:after {
  content: '';
  display: block;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkmark.large:after {
  width: 12px;
  height: 24px;
  
}
.checkmark.medium:after {
  width: 8px;
  height: 16px;
  
}
.checkmark.small:after {
  width: 4px;
  height: 8px;
}
.checkmark.tiny:after {
  width: 1px;
  height: 2px;
  border-width: 0 1px 1px 0;
}

xxx.markdown

XXX

Pure CSS x's. Hover over each one to see a variety of hover style effects.

A Pen by David Condrey on CodePen.

License.