<a href="#" ui="button border small">Button</a>

<button ui="button big round border primary">
  Button
</button>

<input type="submit" value="Button" ui="button danger invert pill">
@import "nib"

color = {
  primary: #0ca1dd,
  success: #48e25b,
  info:    #59c9f6,
  warning: #ff8329,
  danger:  #ff3229
}

[ui*="button"]
  // [small, big]
  // [round, pill]
  // [border]
  // [primary, success, info, warning, danger]
  // [invert]
  // [stretch]

  cursor: pointer
  transition: all 200ms ease
  border: 0
  background: darken(white, 5%)
  color: lighten(black, 20%)
  padding: .5em 1.75em
  text-decoration: none
  &:hover
    background: darken(white, 10%)

  &[ui*="small"]
    padding: .25em 1em
    font-size: .75em
  
  &[ui*="big"]
    padding: 1em 3em
    font-size: 1.25em

  &[ui*="round"]
    border-radius: 5px

  &[ui*="pill"]
    border-radius: 999em

  &[ui*="border"]
    border: 1px solid darken(white, 10%)
    &:hover
      border-color: darken(white, 15%)

  &[ui*="primary"]
    background: color.primary
    color: white
    &:hover
      background: darken(color.primary, 5%)
  &[ui*="border"][ui*="primary"]
    border-color: darken(color.primary, 5%)
    &:hover
      border-color: darken(color.primary, 10%)

  &[ui*="success"]
    background: color.success
    color: white
    &:hover
      background: darken(color.success, 5%)
  &[ui*="border"][ui*="success"]
    border-color: darken(color.success, 5%)
    &:hover
      border-color: darken(color.success, 10%)

  &[ui*="info"]
    background: color.info
    color: white
    &:hover
      background: darken(color.info, 5%)
  &[ui*="border"][ui*="info"]
    border-color: darken(color.info, 5%)
    &:hover
      border-color: darken(color.info, 10%)

  &[ui*="warning"]
    background: color.warning
    color: white
    &:hover
      background: darken(color.warning, 5%)
  &[ui*="border"][ui*="warning"]
    border-color: darken(color.warning, 5%)
    &:hover
      border-color: darken(color.warning, 10%)

  &[ui*="danger"]
    background: color.danger
    color: white
    &:hover
      background: darken(color.danger, 5%)
  &[ui*="border"][ui*="danger"]
    border-color: darken(color.danger, 5%)
    &:hover
      border-color: darken(color.danger, 10%)
  
  &[ui*="invert"]
    border: 2px solid darken(white, 5%)
    background: none
    &:hover
      background: darken(white, 5%)

  &[ui*="invert"][ui*="primary"]
    color: color.primary
    border-color: color.primary
    &:hover
      color: white
      background: color.primary

  &[ui*="invert"][ui*="success"]
    color: color.success
    border-color: color.success
    &:hover
      color: white
      background: color.success

  &[ui*="invert"][ui*="info"]
    color: color.info
    border-color: color.info
    &:hover
      color: white
      background: color.info

  &[ui*="invert"][ui*="warning"]
    color: color.warning
    border-color: color.warning
    &:hover
      color: white
      background: color.warning

  &[ui*="invert"][ui*="danger"]
    color: color.danger
    border-color: color.danger
    &:hover
      color: white
      background: color.danger

  &[ui*="stretch"]
    width: 100%


html
  padding: 3rem

button
  margin-bottom: 1rem

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js