<!-- Default -->
<button class="c-button">Button</button>

<!-- Disabled -->
<button class="c-button" disabled>Disabled button</button>

<!-- More -->
<a class="c-button c-button--more" href="?page=2">Show me another 24 ways…</a>

{%- 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 -%}
/* Default */
{
  "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": "Button"
}

/* Disabled */
{
  "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
}

/* More */
{
  "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": "Show me another 24 ways…",
  "href": "?page=2",
  "mods": [
    "more"
  ]
}

  • Content:
    .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;
    }
    
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/components/common/button/button.css
  • Size: 526 Bytes

There are no notes for this item.