<div class="demo-container">
	<a href="#" class="demo-button" data-micron="shake">Default</a>
	<a href="#" class="demo-button" data-micron="bounce" data-micron-duration="1">Slower</a>
	<a href="#" class="demo-button" data-micron="jelly" data-micron-timing="linear">Linear easing</a>
	<a href="#" class="demo-button" data-micron="tada" data-micron-bind="true" data-micron-id="target">Bound</a>
</div>

<div id="target">This is the target element.</div>
body {
	font-family: "Open Sans", Arial, sans-serif;	background: #f2f2f2;
}

.demo-container,
#target{
	width: 600px;
	margin: 2rem auto;
	text-align: center;
}

#target {
	background: #de4e00;
	padding: 1rem;
	color: white;
}

.demo-button {
	display: inline-block;
	background: #4f67bd;
	color: white;
	padding: 1rem;
	text-decoration: none;
	border-radius: 5px;
	text-transform: uppercase;
	font-size: 75%;
}

External CSS

  1. https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css

External JavaScript

  1. https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js