Free Buttons HTML and CSS styles

<a href="javascript:void(0)" class="galaxyfade">
  Browse documentation
</a>

<style>
  .galaxyfade:hover {
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
  }

  .galaxyfade {
    display: flex;
    position: relative;
    min-height: 39px;
    max-width: 200px;
    align-items: center;
    justify-content: center;
    text-wrap-mode: nowrap;
    white-space-collapse: collapse;
    border-radius: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: .3px;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: linear-gradient(to bottom, var(--bg-color-1), var(--bg-color-2)), linear-gradient(141deg, var(--bg-color-3), var(--bg-color-4));
    background-repeat: repeat, repeat;
    box-shadow: rgba(255, 255, 255, .2) 0 1px 1px inset, rgba(8, 8, 8, .2) 0 1px 2px, rgba(8, 8, 8, .08) 0 4px 4px, #077ac7 0 7px 0 -12px, rgba(255, 255, 255, .12) 0 6px 12px inset;
    transition: box-shadow .4s cubic-bezier(.25, .46, .45, .94), --bg-color-1 .3s linear, --bg-color-2 .3s linear, --bg-color-3 .3s linear, --bg-color-4 .3s linear;
    --bg-color-4: #6b21ef;
    --bg-color-3: #077ac7;
    --bg-color-2: hsla(0, 0%, 100%, 0);
    --bg-color-1: hsla(0, 0%, 100%, 0);
  }

  .galaxyfade:hover {
    --bg-color-2: hsla(0, 0%, 100%, 0);
    --bg-color-1: hsla(0, 0%, 100%, .1);
  }
</style>
Galaxy Fade

Characteristics:
