{%- include headings/h2.html text="Botones" -%}
{%- include headings/h3.html text="Botón con link" -%}
{%- include buttons/link.html href="#" class="btn-primary" content="Click me" -%}
{%- include headings/h3.html text="Botón con link externo" -%}
{%- include buttons/link.html href="https://sutty.nl/" class="btn-primary" content="Click me" -%}
{%- include headings/h3.html text="Botón con atributos extra" -%}
{%- assign extra = 'data-extra="Inspeccióname"' -%}
Inspeccionar para encontrar el atributo {{ extra }}
{%- include buttons/link.html href="#" class="btn-primary" content="Click me" extra=extra -%}
{%- include headings/h3.html text="Botones de todos los colores" -%}
{%- for color in site.data.theme.colors -%}
{%- assign class = color[0] | replace: "_", "-" | prepend: "btn-" -%}
{%- include buttons/link.html href="#" class=class content=class -%}
{%- endfor -%}
{%- include headings/h3.html text="Botón sin link" -%}
Los botones <button> se usan para interacciones JavaScript
{%- include buttons/button.html class="btn-primary" content="Click me" -%}