Free Buttons HTML and CSS styles

        <a class="deepwave" href="javascript:void(0)">
  <span class="deepwave-wrapper">
    <span class="deepwave-text">Sign up</span>
  </span>
</a>

<style>
  .deepwave:active {
    color: #336;
  }

  .deepwave {
    box-shadow: none;
    text-decoration: none;
    text-align: center;
    transition: all .3s;
    transition-behavior: normal;
    fill: #fff;
    display: inline-block;
  }

  @media (max-width: 599px) {
    .deepwave {
      width: 100%;
    }
  }

  .deepwave:visited {
    color: #fff;
  }

  .deepwave .deepwave-wrapper {
    column-gap: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    row-gap: 5px;
  }

  .deepwave-text {
    display: inline-block;
  }

  .deepwave span {
    pointer-events: none;
    text-decoration: inherit;
  }

  .deepwave {
    background-color: #1D1DFF;
    border-radius: 16px;
    color: #FFFFFF;
    font-family: "Work Sans", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 18px;
    padding: 20px 40px;
  }

  .deepwave:focus, .deepwave:hover {
    background-color: #000082;
    border-radius: 16px;
    color: #FFFFFF;
  }
</style>
Deep Wave

Ask changes to AI:
