Shake button

by Bacher

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<button class="btn">
  <span class="inner">OK</span>
</button>

SCSS

.btn {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 10px 6px;
  background: blue;
  border: none;
  border-radius: 4px;
  cursor: pointer;
    
  &_click .inner {
    animation: shake 0.2s;
    //background: red;
  }
}

.inner {
  display: inline-block;
  //transform: translate(-10px, 0);
}

@keyframes shake {
  0% { transform: translate(0, 0) }
  33% { transform: translate(-2px, 0) }
  66% { transform: translate(2px, 0) }
  100% { transform: translate(0, 0) }
}

JavaScript

//setTimeout(() => $('.btn').addClass('btn_click'), 1000);

let timeout;
$('.btn').on('click', e => {
	if (!timeout) {
  	$('.btn').addClass('btn_click');
 
		timeout = setTimeout(() => {
    	timeout = null;
  		$('.btn').removeClass('btn_click');
  	}, 200)
  }
});