Free Buttons HTML and CSS styles

<a class="sunsweep" href="javascript:void(0)">Learn more</a>

<style>
  .sunsweep, .sunsweep::before {
    transition-behavior: normal, normal, normal;
  }

  .sunsweep {
    border-radius: 100px;
    line-height: 1;
    outline: 0;
    overflow: hidden;
    text-decoration: none;
    transition: background-color 250ms cubic-bezier(.4, 0, .2, 1) 0ms, box-shadow 250ms cubic-bezier(.4, 0, .2, 1) 0ms, border-color 250ms cubic-bezier(.4, 0, .2, 1) 0ms;
    --transition-property: left;
    appearance: none;
    background-color: rgba(255, 204, 0, 0.04);
    color: #180136;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;;
    font-weight: 600;
    margin: 0;
    min-width: 64px;
    padding: 16px 26px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    justify-content: center;
    -webkit-box-pack: center;
    align-items: center;
    -webkit-box-align: center;
    border: 0 initial !important;
    border-color: initial !important;
    border-image: initial initial initial initial initial !important;
    box-shadow: inset 0 0 0 2px #ffcc00 !important;
    display: inline-flex;
    font-size: 1rem;
    letter-spacing: .01875rem;
  }

  @media (max-width: 767px) and (pointer:coarse) {
    .sunsweep {
      font-size: 1rem;
    }
  }

  @media (min-width: 768px) {
    .sunsweep {
      font-size: .875rem;
      letter-spacing: .025rem;
    }
  }

  @media (min-width: 1920px) {
    .sunsweep {
      font-size: 1rem;
      letter-spacing: .03125rem;
    }
  }

  .sunsweep:hover {
    text-decoration: none;
  }

  .sunsweep:active, .sunsweep:hover {
    box-shadow: none;
  }

  .sunsweep:hover::before {
    left: 0;
  }

  .sunsweep::before {
    background-color: #ffcc00;
    border-radius: 98px;
    content: "";
    height: var(--size);
    left: calc(var(--size)*-1);
    position: absolute;
    top: -5%;
    transition: var(--transition-property) .25s cubic-bezier(.4, 0, .2, 1);
    width: var(--size);
    will-change: var(--transition-property);
    z-index: -1;
    --size: 110%;
  }
</style>
Sun Sweep

Characteristics:
