Free Buttons HTML and CSS styles

        <button class="orchidarrow">
  Contact us
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round"
      d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
  </svg>
</button>

<style>
  .orchidarrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.5rem;
    padding-left: 2rem;
    padding-right: 3rem;
    height: 2.5rem;
    border-radius: calc(0.5rem - 2px);
    position: relative;
    background-color: hsl(239 84% 67%);
    color: hsl(0 0% 98%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: color 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.15s cubic-bezier(.4, 0, .2, 1), border-color 0.15s cubic-bezier(.4, 0, .2, 1), text-decoration-color 0.15s cubic-bezier(.4, 0, .2, 1), fill 0.15s cubic-bezier(.4, 0, .2, 1), stroke 0.15s cubic-bezier(.4, 0, .2, 1);
  }

  .orchidarrow:hover {
    background-color: hsl(239 84% 67% / 0.9);
  }

  .orchidarrow:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow:
      0 0 0 1px hsl(240 5% 64.9%),
      0 0 #0000,
      0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  .orchidarrow:disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  .orchidarrow svg {
    position: absolute;
    right: 1rem;
    height: 1rem;
    width: 1rem;
    transition: transform 0.15s cubic-bezier(.4, 0, .2, 1);
  }

  .orchidarrow:hover svg {
    transform: translateX(0.5rem);
  }
</style>
Orchid Arrow

Ask changes to AI:
