Ocean Stone

oceanstone
(5.0)
Characteristics:

Flat
With arrow
Rounded
<a class="oceanstone" href="javascript:void(0)">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
  </svg>
  Receive alerts
</a>

<style>
  :root {
    --button-border-radius: 0.5rem;
    --color-button-primary: #004080;
    --color-button-hover: #002f63;
    --color-button-text: #fff;
    --button-min-width: 100px;
  }

  .oceanstone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-button-primary);
    color: var(--color-button-text);
    text-decoration: none;
    padding: 0.6em 1.2em;
    border-radius: var(--button-border-radius);
    font-weight: 500;
    font-size: 16px;
    min-width: var(--button-min-width);
    transition: background-color 0.3s ease;
    position: relative;
  }

  .oceanstone:hover {
    background-color: var(--color-button-hover);
  }

  .oceanstone svg {
  	margin-right: 4px;
  }
</style>