Django pattern library

patterns/atoms/buttons/round_button.html

Window sizes

Template source
Template config
Template docs

<a
  href="{{ url }}"
  id="{{ id }}"
  class="
    flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal
    hover:no-underline max-w-max

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

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

      {% if show_arrow_on_hover %}
        xl:pl-8 xl:pr-3
      {% else %}
        xl:px-8
      {% endif %}
    {% endblock %}
  "
>
  <span class="group-hover:-translate-x-2 duration-200" id="{{ id }}-inner-text">{{ button_text }}</span>
  <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">{% include 'patterns/atoms/icons/arrow.html' %}</span>
</a>

context:
  button_text: 'Další články'
  classes: ''
  url: '#'
  show_arrow_on_hover: True