<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class='demo_wrapper'>
  <div class="container zoom_shrink"><div class="close_icon zoom_shrink"></div></div>

  <div class="container zoom_invert"><div class="close_icon zoom_invert"></div></div>

  <div class="container spin"><div class="close_icon spin"></div></div>
  
  <div class='container hide'></div>
</div>
<div class='demo_wrapper'>
  <p class='container'>zoom_shrink</p>
  <p class='container'>zoom_invert</p>
  <p class='container'>spin</p>
  <p class='container hide'></p>
</div>
/*BEGIN General Classes for demo page*/
body
{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  font-size: 22px;
  background: rgb(50,50,50);
}
p
{
  width: 6em!important;
  font: 0.75em arial, sans-serif;
  color: rgba(200,200,200,0.6);
  align-self: flex-start;
  text-align: center;
}
p:before
{
  border-color: transparent!important;
}
.hide
{
  opacity: 0;
}
.demo_wrapper
{
  display: flex;
  width: 100%;
  height: 4em;
  background: rgba(250,250,250, 0.05);
  justify-content: space-around;
  align-items: center;
}
/*END General Classes for demo page*/
/*BEGIN normal close button Classes*/
.container
{
  position: relative;
  width: 2em;
  height: 2em;
}
.container:before
{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0;
  width: 0;
  border: 1em solid rgba(100,100,100,0.8);
  border-radius: 6em;
  transition: all 0.2s ease-in-out;
}
.close_icon
{
  transition: all 0.075s ease-in-out;
  position: absolute;
  width: 2em;
  height: 2em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0.1em solid;
  border-color: rgba(250,250,250,0.8);
  border-radius: 6em;
  /*background: rgba(255,255,255,0.8);*/
}
.close_icon:after
{
  transition: all 0.075s ease-in-out;
  font: 1em Helvetica, arial;
  font-size: 1em;
  width: 100%;
  height: 100%;
  content:"x";
  color: rgba(250,250,250,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0,-5%) scale(1.25,1);
}
/*END normal close button Classes*/
/*BEGIN First Close button Zoom and Shrink animations*/

.container.zoom_shrink:hover .close_icon.zoom_shrink
{
  font-size: 1.2em;
}

.container.zoom_shrink:active:before
{
  border-color: rgba(200,100,100,0.8);
}
.container.zoom_shrink:active .close_icon.zoom_shrink
{
  font-size: 0.75em;
  border-color: rgba(50,50,50,0.8);
}
.container.zoom_shrink:active .close_icon.zoom_shrink:after
{
  color: rgba(50,50,50,0.8);
}

/*END First Close button Zoom and Shrink animations*/
/*BEGIN Second Close button Inverted Zoom animations*/
.container.zoom_invert:hover:before
{
  font-size: 1.4em;
  border-color: rgba(200,200,200,0.6);
}
.container.zoom_invert:hover .close_icon.zoom_invert
{
  border-color: rgba(200,200,200,1);
}
.container.zoom_invert:hover .close_icon.zoom_invert:after
{
  color: rgba(100,100,100,1);
}

.container.zoom_invert:active:before
{
  font-size: 1.2em;
  border-color: rgba(200,100,100,0.8);
}
.container.zoom_invert:active .close_icon.zoom_invert
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  border-color: rgba(50,50,50,0.8);
}
.container.zoom_invert:active .close_icon.zoom_invert:after
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  color: rgba(50,50,50,0.8);
}
/*END Second Close button Inverted Zoom animations*/
/*BEGIN Third Close button Spin animations*/
.container.spin:before
{
  animation: container_spin_back 0.2s ease-in-out forwards;
}
.close_icon.spin
{
  animation: icon_spin_back 0.2s ease-in-out forwards;
}

.container.spin:hover:before
{
  animation: container_spin 0.2s ease-in-out forwards;
}
.container.spin:hover .close_icon.spin
{
  animation: icon_spin 0.2s ease-in-out forwards;
}

.container.spin:active:before
{
  animation: container_spin_double 0.2s ease-in-out forwards;
}
.container.spin:active .close_icon.spin
{
  animation: icon_spin_double 0.2s ease-in-out forwards;
  border-color: rgba(50,50,50,0.8);
}
.container.spin:active .close_icon.spin:after
{
  color: rgba(50,50,50,0.8);
}
@keyframes container_spin
{
  0%{border-color: rgba(100,100,100,0.8);}
  50%{border-left-width: 0;
  border-right-width:  0;
  border-color: rgba(100,100,100,0.8);}
  100%{border-color: rgba(200,200,200,0.6);}
}
@keyframes container_spin_back
{
  0%{border-color: rgba(200,200,200,0.6);}
  50%{border-left-width: 0;
  border-right-width:  0;
  border-color: rgba(200,200,200,0.6);}
  100%{border-color: rgba(100,100,100,0.8);}
}
@keyframes container_spin_double
{
  0%{border-color: rgba(200,200,200,0.6);}
  50%{border-left-width: 0;
    border-right-width:  0;
    border-color: rgba(200,200,200,0.6);}
  100%{border-color: rgba(200,100,100,0.8);}
}
@keyframes icon_spin
{
  50%{width: 0;}
}
@keyframes icon_spin_back
{
  50%{width: 0;}
}
@keyframes icon_spin_double
{
  50%{width: 0;}
}
/*END Third Close button Spin animations*/
/*CSS only close icon*/
/*Feel free to copy*/

/*by C.Dinkelborg*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.