<button class="c-button" disabled>Disabled button</button>
{%- if href -%}
<a class="c-button{% for mod in mods %} c-button--{{ mod }}{% endfor %}" href="{{ href }}">{{ label }}</a>
{%- else -%}
<button class="c-button{% for mod in mods %} c-button--{{ mod }}{% endfor %}"{{ " type=\"submit\"" if submit }}{{ " disabled" if disabled }}>{{ label }}</button>
{%- endif -%}
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"label": "Disabled button",
"disabled": true
}
.c-button {
@apply --typeset-ui;
display: inline-block;
padding: map(spaces, medium) map(spaces, large);
background-color: $color-ui-link;
text-align: center;
text-transform: uppercase;
color: white;
&:hover {
background-color: $color-ui-link--hover;
color: white;
}
&:active {
background-color: $color-ui-link--active;
color: white;
}
@media (-ms-high-contrast: active) {
border: 1px solid;
}
@media print {
display: none;
}
}
.c-button--more {
display: block;
}
There are no notes for this item.