11. Buttons

Button styles are tested to work against a number of different elements for consistent and predictable styling:

  • anchor tags
  • button tags
  • label tags
  • inputs as submits

11.1 Button defaults

  • .btn-selected
  • .disabled
anchor
:hover
anchor
:active
anchor
.btn-selected
anchor 
<div class="kss-row cf">
  <div class="kss-col kss-col-6-alpha kss-col-6-ie8">
    <a class="btn {$modifiers}" href="javascript:void(0)">anchor</a>
    <button class="btn {$modifiers}">button</button>
    <label class="btn {$modifiers}">label</label>
    <input class="btn {$modifiers}" type="submit" value="submit">
  </div>
</div>

11.1.1 Full Width Buttons

  • .d-block
anchor
:hover
anchor
:active
anchor
.btn-selected
anchor 
<div class="kss-row cf">
  <div class="kss-col kss-col-6-vpalpha kss-col-6-ie8">
    <a class="btn {$modifiers} d-block" href="javascript:void(0)">anchor</a>
    <button class="btn {$modifiers} d-block">button</button>
    <label class="btn {$modifiers} d-block">label</label>
    <input class="btn {$modifiers} d-block" type="submit" value="submit">
  </div>
</div>

11.2 Disabled buttons

  • .disabled
  • [disabled]
anchor [disabled] anchor .disabled 


<a disabled class="btn" href="javascript:void(0);">anchor [disabled]</a>
<a class="btn disabled" href="javascript:void(0);">anchor .disabled</a>
<br>
<button disabled class="btn">button [disabled]</button>
<button class="btn disabled">button .disabled</button>
<br>
<label disabled class="btn">label [disabled]</label>
<label class="btn disabled">label .disabled</label>
<br>
<input disabled class="btn" type="submit" value="submit [disabled]">
<input class="btn disabled" type="submit" value="submit .disabled">

11.2.1 Full Width Disabled Buttons

  • .d-block
anchor [disabled] anchor .disabled 


<div class="kss-row cf">
  <div class="kss-col kss-col-6-vpalpha kss-col-6-ie8">
    <a disabled class="btn d-block" href="javascript:void(0);">anchor [disabled]</a>
    <a class="btn d-block disabled" href="javascript:void(0);">anchor .disabled</a>
    <br>
    <button disabled class="btn d-block">button [disabled]</button>
    <button class="btn d-block disabled">button .disabled</button>
    <br>
    <label disabled class="btn d-block">label [disabled]</label>
    <label class="btn d-block disabled">label .disabled</label>
    <br>
    <input disabled class="btn d-block" type="submit" value="submit [disabled]">
    <input class="btn d-block disabled" type="submit" value="submit .disabled">
  </div>
</div>

11.3 Button groups

<div class="btn-group cf">
  <label class="btn btn-primary">1</label>
  <label class="btn btn-primary">2</label>
  <label class="btn btn-primary">3</label>
  <label class="btn btn-primary">4</label>
  <label class="btn btn-primary">5</label>
  <label class="btn btn-primary">6</label>
  <label class="btn btn-primary">7</label>
</div>
<div class="btn-group cf">
  <label class="btn btn-primary">1</label>
  <label class="btn btn-primary">2</label>
</div>
<div class="btn-group cf">
  <label class="btn btn-primary">1</label>
</div>