<h1>Click and Hold Button Animation</h1>

<button class="icon_close hold_trigger">
  <span class="text">Hold Me!</span>
  <span class="spinner"></span>
</button>
 
body{
  background: #F06060;
}

h1{
  color: #fff;
  text-align: center;
  font-family: Arial;
  font-size: 50px;
  font-weight: normal;
}

button{
  background: none repeat scroll 0 0 #CB4E4E;
  border-radius: 50%;
  box-shadow: 0 8px #AB3C3C;
  color: #FFFFFF;
  width: 150px;
  height: 150px;
  border: 0px;
  cursor: pointer;
  position: relative;
  font-size: 25px;
  margin: 5% auto;
  display: block;
  outline: none;
}


button:hover{
  box-shadow: 0px 5px #AB3C3C;
  top: 2px; 
}
button:active{
  box-shadow: 0px 0px #AB3C3C;
  top: 5px; 
}

.spinner{
  position: absolute;
  left: 0; right: 0;
  top: 6%;
  moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 5px solid #fff;
border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
color: #52b700;
display: block;
font-size: 30px;
height: 135px;
line-height: 50px;
margin: 0 auto;
width: 135px;
-webkit-perspective: 300;
-moz-perspective: 300;
-ms-perspective: 300;
perspective: 300;
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
-ms-transform-style: preserve-3d;
transform: rotateY(0deg);
transform-style: preserve-3d;
}

.active{
  -webkit-animation: spin-cw 1s linear;
-moz-animation: spin-cw 1s linear;
animation: spin-cw 1s linear;
}

@-webkit-keyframes spin-cw {
  0%   { -webkit-transform:rotate(0deg);  }
  100% { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin-cw {
  0%   { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(360deg); }
}
@-o-keyframes spin-cw {
  0%   { -o-transform:rotate(0deg); }
  100% { -o-transform:rotate(360deg); }
}
@keyframes spin-cw {
  0%   { transform:rotate(0deg);  }
  100% { transform:rotate(360deg); }
}
var timeout_id = 0,
    hold_time = 1000,
    hold_trigger = $('.hold_trigger');

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
    $('.spinner').removeClass('active');
});

function menu_toggle() {
  $('.spinner').addClass('active');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js