Free Buttons HTML and CSS styles

        <a href="javascript:void(0)" class="arrowend">
  <span>Browse Docs</span>
  <span aria-hidden="true" class="arrow">→</span>
</a>

<style>
  :root {
    --color-text-dark: #191918;
    --border-radius-300: 0.3125rem;
    --color-black: #000;
    --color-white: #fff;
    --color-link-hover-from-inherited: #097fe8;
  }

  .arrowend {
    font-family: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
    border-radius: var(--border-radius-300);
    cursor: pointer;
    display: inline;
    position: relative;
    text-underline-offset: .1em;
  }

  .arrowend:focus {
    box-shadow: 0 0 0 2px var(--color-black), 0 0 0 4px var(--color-white);
    outline: 0;
  }

  .arrowend:focus-visible {
    box-shadow: 0 0 0 2px var(--color-black), 0 0 0 4px var(--color-white);
    outline: 0;
  }

  .arrowend:focus:not(:focus-visible) {
    box-shadow: none;
    outline: 0;
  }

  .arrowend:hover {
    color: var(--color-link-hover-from-inherited);
  }

  .arrowend.arrow {
    border-style: none;
    display: inline;
    margin-left: .2em;
    text-decoration: none;
  }

  .arrowend {
    text-decoration: none;
  }

  .arrowend:hover span:not(.arrow) {
    text-decoration: underline;
  }
</style>
Arrow End

Ask changes to AI:
