Marwave Push

marwavepush
(5.0)
Characteristics:

Flat
With arrow
Rounded
<a class="marwavepush" href="javascript:void(0)">
  <span>Learn more</span>
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <line x1="5" y1="10" x2="15" y2="10" />
      <polyline points="10 5 15 10 10 15" />
    </svg>
  </span>
</a>


<style>
  .marwavepush {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Gilroy', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #0b3558;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
  }

  .marwavepush:hover {
    color: #476788;
  }

  .marwavepush:active {
    color: #004796;
  }

  .marwavepush:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 107, 255, 0.16);
  }

  .marwavepush .icon {
    transition: transform 0.1s linear;
  }

  .marwavepush:hover .icon,
  .marwavepush:focus .icon {
    transform: translateX(4px);
  }

  .marwavepush:disabled {
    color: #aaa;
    cursor: not-allowed;
  }
</style>