JSFiddle - React, Tailwind, and code Playground
by shanejones
HTML
<a href="#" class="button cl">Test Click Effect</a>
SCSS
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a.button {
padding: 1rem 2rem;
background: #cca;
display: inline-block;
transition: transform .1s ease-in-out;
color: white;
font-weight:bold;
border-radius: .25rem;
&.i {
transform: scale(0.95);
}
}
JavaScript
$('.cl').click(function(e){
var item = $(this);
item
.css('i')
.delay(100)
.removeClass('i')
})