Free Buttons HTML and CSS styles - midnightmotion button

        <a href="javascript:void(0)" class="midnightmotion midnightmotion-button-black button-play">
	Play now
</a>

<style>
  .midnightmotion {
    align-items: center;
    border-radius: 38px;
    font-size: 14px;
    font-weight: 300;
    height: 38px;
    justify-content: center;
    letter-spacing: -.14px;
    line-height: 120%;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    font-family: Helvetica, Arial, sans-serif;
    tab-size: 4;
    text-align: center;
  }

  @media (min-width: 768px) {
    .midnightmotion {
      font-size: 16px;
      letter-spacing: -.16px;
    }
  }

  @media (min-width: 1025px) {
    .midnightmotion {
      height: 48px;
    }
  }

  .midnightmotion.midnightmotion-button-black {
    color: rgb(255 255 255/var(--tw-text-opacity));
    --tw-text-opacity: 1;
    background-color: rgb(34 33 43/var(--tw-bg-opacity));
    --tw-bg-opacity: 1;
  }

  .midnightmotion.midnightmotion-button-black:not(.button-arrow):not(.button-play):hover {
    background-color: rgb(109 109 114/var(--tw-bg-opacity));
    --tw-bg-opacity: 1;
  }

  .midnightmotion.button-play {
    padding: 3px 18px 3px 3px;
    position: relative;
  }

  @media (min-width: 1025px) {
    .midnightmotion.button-play {
      padding: 5px 1.5rem 5px 5px;
    }
  }

  .midnightmotion.button-play::after, .midnightmotion.button-play::before {
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    --tw-content: "";
    content: var(--tw-content);
  }

  @media (min-width: 1025px) {

    .midnightmotion.button-play::after,   .midnightmotion.button-play::before {
      height: 38px;
      margin-right: 14px;
      width: 38px;
    }
  }

  .midnightmotion.button-play::after {
    background-image: url(https://www.nice.com/img/new-play-icon-blue.svg);
    left: 3px;
    opacity: 0;
    position: absolute;
  }

  @media (min-width: 1025px) {
    .midnightmotion.button-play::after {
      left: 5px;
    }
  }

  .midnightmotion.button-play.midnightmotion-button-black::before {
    background-image: url(https://www.nice.com/img/new-play-icon.svg);
  }

  .midnightmotion.button-play:hover::before {
    opacity: 0;
  }

  .midnightmotion.button-play:hover::after {
    opacity: 1;
  }

  .midnightmotion:focus-visible {
    outline: 2px solid #0018ff;
    outline-offset: -2px;
  }

  @media (min-width: 1025px) {
    .midnightmotion {
      text-align: left;
    }
  }

  .midnightmotion {
    display: inline-flex;
    margin-right: .5rem;
  }
</style>
Midnight Motion

Ask changes to AI:
