Jquery

("button").on("touchsart mousedown", function () { (this).addClass("clicked");
});

("button").on("touchend mouseup", function () { (this).removeClass("clicked");
$(this).blur();
});

!css
$color: #3DB74E

html, body
width: 100vw
height: 100vh
margin: 0
padding: 0
display: flex

button
margin: auto
position: relative
display: block
font-weight: 100
background: #ffffff
border: 1px solid rgba($color, 1) text-decoration: none color:$color
padding: 15px 20px
transition: .225s ease all
overflow: hidden
will-change: transform
box-shadow: 3px 3px 0px rgba($color, 0.5)

&:hover, &:focus
	cursor: pointer
	transform: translate(-4px, -4px)
	box-shadow: 7px 7px 0px rgba($color, 0.3)
	color: black

&.clicked
	cursor: pointer
	transform: translate(3px, 3px) !important
	box-shadow: 0px 0px 0px rgba($color, 1) !important
	border: 1px solid rgba($color, 0.5)