round_button.html

<{% block element_opener %}a{% endblock %}
  {% block href %}href="{% if url %}{{ url }}{% else %}#{% endif %}"{% endblock %}
  class="
    flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal
    hover:no-underline

    {% if not classes %}
      bg-black text-white
    {% else %}
      {{ classes }}
    {% endif %}

    {% block size_classes %}
      pl-8 pr-3 py-3

      xl:text-lg

      {% if show_arrow_on_hover %}
        xl:pl-8 xl:pr-3
      {% else %}
        xl:px-8
      {% endif %}

      xl:py-4
    {% endblock %}
  "
>
  <span
    {% if show_arrow_on_hover %}
      class="
        group-hover:-translate-x-2 duration-200
      "
    {% endif %}
  >{{ text }}</span>

  {% if show_arrow_on_hover %}
    <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">{% include 'styleguide2/includes/atoms/icons/arrow.html' %}</span>
  {% endif %}
</{% block element_closer %}a{% endblock %}>