{%- 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" -%}