Free Buttons HTML and CSS styles

        <a href="javascript:void(0)" class="nightlaunch nightlaunch-button-black button-arrow">
    Next step
</a>

<style>
  .nightlaunch {
    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) {
    .nightlaunch {
      font-size: 16px;
      letter-spacing: -.16px;
    }
  }

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

  .nightlaunch {
    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;
  }

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

  .nightlaunch.button-arrow {
    padding: 3px 3px 3px 18px;
    position: relative;
  }

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

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

  @media (min-width: 1025px) {

    .nightlaunch.button-arrow::after, .nightlaunch.button-arrow::before {
      height: 38px;
      margin-left: 14px;
      width: 38px;
    }
  }

  .nightlaunch.button-arrow::before {
    background-image: url(https://www.nice.com/img/button-arrow-blue.svg);
    opacity: 0;
    position: absolute;
    right: 3px;
  }

  @media (min-width: 1025px) {
    .nightlaunch.button-arrow::before {
      right: 5px;
    }
  }

  .nightlaunch.button-arrow.nightlaunch-button-black::after {
    background-image: url(https://www.nice.com/img/button-arrow-empty-blue.svg);
  }

  .nightlaunch.button-arrow:hover::after {
    opacity: 0;
  }

  .nightlaunch.button-arrow:hover::before {
    opacity: 1;
  }

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

  .nightlaunch {
    display: inline-flex;
    margin-right: .5rem;
  }
</style>
Night Launch

Ask changes to AI:
