Free Buttons HTML and CSS styles

<a class="launchdark" href="javascript:void(0)">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
</svg>
  Become a Partner
</a>

<style>
  :root {
    --fa-display: ;
  }

  .launchdark, .launchdark:hover {
    color: #faf7ec;
    text-decoration: none;
  }

  .launchdark {
    background-color: #1e1e1e;
    border-radius: 100px;
    border-style: initial;
    border-width: 0;
    cursor: pointer;
    display: inline-block;
    font-family: elza, sans-serif;
    font-size: 1rem;
    font-variation-settings: "wght" 700;
    font-weight: 700;
    line-height: 1rem;
    padding: 15px 30px;
    text-align: center;
    transform: scale(1);
    transition: all .1s ease-in-out;
    transition-behavior: normal;
  }

  .launchdark svg {
    margin-right: 5px;
  }

  .launchdark:hover {
    background-color: #050505;
    transform: scale(1.1);
  }

  .launchdark svg {
    display: var(--fa-display, inline-block);
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
  }

</style>
Launch Dark

Characteristics:
