Pattern Library

<a
  class="
    navbar__border-button__wrapper

    hover:no-underline

    hidden lg:inline
  "
  href="{{ button.url }}"
>
  <div
    class="
      navbar__border-button {{ extra_classes }}

      flex items-center justify-center border-none duration-150 border-4 w-24 h-11 py-4 px-6

      xl:w-auto
    "
  >{{ button.name }}</div>
</a>


<a
  href="{{ button.url }}"
  class="
    group uppercase

    lg:hidden inline
  "
>
  <div>
    <div
      class="
        flex justify-center items-center group border-4 bg-transparent border-yellow-500 text-black w-48 h-11 py-8 px-0

        group-hover:border-yellow-600

        xl:w-auto
      "
    >{{ button.name }}</div>
  </div>
</a>