<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="rhythm-meter-btn">
  <span class="meter">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </span>
  <span>
    Play preview
  </span>
</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.rhythm-meter-btn{display:flex;align-items:center;gap:12px;padding:11px 18px;border:0;border-radius:10px;background:#25213b;color:#fff;font:800 16px Arial,sans-serif;cursor:pointer;box-shadow:0 7px 14px #211a3d46;transition:transform .2s,background .2s}.meter{display:flex;align-items:center;gap:3px;height:27px}.meter i{width:4px;height:10px;border-radius:4px;background:#f58fc2;animation:meter-beat .8s ease-in-out infinite}.meter i:nth-child(2){height:20px;background:#a98aff;animation-delay:.16s}.meter i:nth-child(3){height:14px;background:#68dfd0;animation-delay:.31s}.meter i:nth-child(4){height:23px;background:#ffd36f;animation-delay:.46s}.rhythm-meter-btn:hover{transform:translateY(-3px);background:#342d54}.rhythm-meter-btn:hover i{animation-duration:.32s}@keyframes meter-beat{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}