UI Elements

index.html

<h1>UI Elements</h1>
<h2>Buttons</h2>
<button class="primary">Primary</button>
<button class="dark">Dark</button>
<button class="success">Proceed</button>
<button class="error">Error</button>

style.scss

@mixin button ($colour: #38d) {
  $shadow: $colour;
  display: inline-block;
  border: none;
  font-family: inherit;
  color: #fff;
  font-size: 16px;
  background-image: linear-gradient(to left, adjust-hue($colour, -10%), $colour, adjust-hue($colour, 10%));
  line-height: 1;
  padding: .75em;
  border-radius: 3px;
  letter-spacing: .1ch;
  cursor: pointer;
  box-shadow: 0 3px 15px rgba($shadow, .5);
  transition: 300ms ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba($shadow, .3);
  }
}

html {
  font-size: 18px;
  font-weight: 300;
  font-family: "Hind", Sans-serif;
  background: #f8f8f8;
  color: #333;
}

h1,h2,h3 {
  font-weight: 600;
}

.primary {
  @include button(hsl(240,80,65));
}

.dark {
  @include button(hsl(220,20,30));
}

.error {
  @include button(hsl(0,80,65));
}

.success {
  @include button(hsl(120,80,65));
}

styles

<link href="https://fonts.googleapis.com/css?family=Hind:300,400,600,700" rel="stylesheet" />

ui-elements.markdown

UI Elements

A Pen by Charles Ojukwu on CodePen.

License.