Free Buttons HTML and CSS styles - lavenderglide button

        <a href="javascript:void(0)" class="lavenderglide" role="button">
  <span class="lavenderglide-button-label">
    Discover our story
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" fill="none" viewBox="0 0 26 25" class="lavenderglide-button-icon">
      <path fill="currentColor" stroke="currentColor" stroke-width="2" d="m14.964.558-3.168 2.664 6.984 7.344H.744v3.816H18.78l-6.984 7.344 3.168 2.664 10.728-11.916z"></path>
    </svg>
  </span>
</a>


<style>
.lavenderglide {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #7729b5;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.lavenderglide:hover {
  color: #5e1f91;
}

.lavenderglide .lavenderglide-button-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lavenderglide .lavenderglide-button-icon {
  height: 0.6rem;
  width: auto;
  transform: translateX(5px);
  transition: transform 0.2s ease-in-out;
}

.lavenderglide:hover .lavenderglide-button-icon {
  transform: translateX(8px);
}
</style>
Lavender Glide

Ask changes to AI:
