<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*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.