<div class="margin-bottom-md">
<a href="#" class="btn btn--primary">Button primary</a>
<a href="#" class="btn btn--primary">Button primary with icon <svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
<a href="#" class="btn btn--primary">Load more <svg id="icon--arrow-down" class="icon icon--arrow-down margin-left-md" width="11" height="13" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
<a href="#" class="btn btn--primary">Filter <svg id="icon--filter" class="icon icon--filter margin-left-md" width="21" height="12" viewBox="0 0 21 12">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linejoin="round">
<path d="M0 3h4" />
<path stroke-linecap="round" d="M4 4.5h6V1H4z" />
<path d="M10 3h11M21 10h-4" />
<path stroke-linecap="round" d="M11 11.5h6V8h-6z" />
<path d="M11 10H0" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--secondary">Button secondary</a>
<a href="#" class="btn btn--secondary">Button secondary with icon <svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--tertiary">Button tertiary</a>
<a href="#" class="btn btn--tertiary">Button tertiary with icon <svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--primary btn--outline">Button primary outline</a>
<a href="#" class="btn btn--primary btn--outline">Button primary outline with icon <svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="padding-right-0 padding-left-0 btn btn--tertiary">Button tertiary no padding with icon <svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="padding-right-0 padding-left-0 btn btn--tertiary"><span class="visually-hidden">icon only</span><svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="width--100 flex justify-center btn btn--primary">Button primary full width</a>
</div>
<div class=margin-bottom-md>
<h6>
Note! The following buttons are always generated by the Frontend framework.
However these styles are not used by the Mantle theme design.
</h2>
<a href="#" class="btn btn--primary btn--small">Button primary small</a>
<a href="#" class="btn btn--secondary btn--small">Button secondary small</a>
<a href="#" class="btn btn--outline btn--secondary btn--small">Button secondary outline small</a>
<a href="#" class="btn btn--outline btn--secondary">Button secondary outline</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--primary">{{title}} primary</a>
<a href="#" class="btn btn--primary">{{title}} primary with icon {{> arrow-right}}</a>
<a href="#" class="btn btn--primary">Load more {{> arrow-down}}</a>
<a href="#" class="btn btn--primary">Filter {{> filter}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--secondary">{{title}} secondary</a>
<a href="#" class="btn btn--secondary">{{title}} secondary with icon {{> arrow-right}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--tertiary">{{title}} tertiary</a>
<a href="#" class="btn btn--tertiary">{{title}} tertiary with icon {{> arrow-right}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="btn btn--primary btn--outline">{{title}} primary outline</a>
<a href="#" class="btn btn--primary btn--outline">{{title}} primary outline with icon {{> arrow-right}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="padding-right-0 padding-left-0 btn btn--tertiary">{{title}} tertiary no padding with icon {{> arrow-right}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="padding-right-0 padding-left-0 btn btn--tertiary"><span class="visually-hidden">icon only</span>{{> arrow-right}}</a>
</div>
<div class="margin-bottom-md">
<a href="#" class="width--100 flex justify-center btn btn--primary">{{title}} primary full width</a>
</div>
<div class=margin-bottom-md>
<h6>
Note! The following buttons are always generated by the Frontend framework.
However these styles are not used by the Mantle theme design.
</h2>
<a href="#" class="btn btn--primary btn--small">{{title}} primary small</a>
<a href="#" class="btn btn--secondary btn--small">{{title}} secondary small</a>
<a href="#" class="btn btn--outline btn--secondary btn--small">{{title}} secondary outline small</a>
<a href="#" class="btn btn--outline btn--secondary">{{title}} secondary outline</a>
</div>
{{#*inline "arrow-right"}}
<svg id="icon--arrow-right" class="icon icon--arrow-right margin-left-md" width="13" height="11" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)"/>
</g>
</svg>
{{/inline}}
{{#*inline "arrow-down"}}
<svg id="icon--arrow-down" class="icon icon--arrow-down margin-left-md" width="11" height="13" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)"/>
</g>
</svg>
{{/inline}}
{{#*inline "filter"}}
<svg id="icon--filter" class="icon icon--filter margin-left-md" width="21" height="12" viewBox="0 0 21 12">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linejoin="round">
<path d="M0 3h4" />
<path stroke-linecap="round" d="M4 4.5h6V1H4z" />
<path d="M10 3h11M21 10h-4" />
<path stroke-linecap="round" d="M11 11.5h6V8h-6z" />
<path d="M11 10H0" />
</g>
</svg>
{{/inline}}
{
"title": "Button"
}
You can use a list element to align the buttons or use the anchor tag only. You might also use a button tag, instead of an anchor