Buttons
This is the button component. It provides basic styles for buttons throughout the site.
:hover
Highlights when hovering.
.btn--primary
Primary button style.
.btn--secondary
Secondary button style.
.btn--reversed
Dark background color with white text button style.
.btn--donate
Donate button style.
.btn--large
Modifier to make any button larger.
.btn--xlarge
Modifier to make buttons extra large.
.btn--centered
Modifier to make the button centered.
.is-disabled
Disable the button. The same styles will be applied if you use the
disabled
attribute. The disabled attribute is the preferred method.
{% for item in items %}
{% if modifier_class == 'btn--primary' %}
<div style="padding: 1rem; background-color: #0099cc;">
<button type="button" class="btn {{ modifier_class }}">{{ item.text }}</button>
</div>
{% else %}
<button type="button" class="btn {{ modifier_class }}"{{ modifier_class == 'is-disabled' ? ' disabled' }}>{{ item.text }}</button>
{% endif %}
{% endfor %}