<a href="#!" class="button" data-micron="bounce">Bounce</a>

<a href="#!" class="button" data-micron="groove">Groove</a>

<a href="#!" class="button" data-micron="squeeze">Squeeze</a>

<a href="#!" class="button" data-micron="flicker">Flicker</a>

<a href="#!" class="button" data-micron="tada">Ta da</a>

<a href="#!" class="button" data-micron="pop">Pop</a>
.button {
  text-align: center;
  cursor: pointer;
  padding: 1rem 3rem;
  display: inline-block;
  border-radius: 3px;
  margin: 1rem;
  text-decoration: none;
  font-family: system-ui;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff !important;
  background-image: linear-gradient(-45deg, #f761a1 0, #8c1bab 100%);
  box-shadow: 0 3px 13px 0 rgba(14, 9, 73, 0.2),
    0 11px 21px 0 rgba(255, 166, 220, 0.004);
}

External CSS

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

External JavaScript

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