<div class="container">
  <div class="row">
    <h1>Basic Buttons</h1>
    <button class="button">Default</button>
    <button class="button btn-primary">Primary</button>
    <button class="button btn-success">Success</button>
    <button class="button btn-warning">Warning</button>
    <button class="button btn-info">Info</button>
  </div>
  <div class="row">
    <h1>Raised Buttons</h1>
    <button class="button btn-raised  btn">Default</button>
    <button class="button btn-raised btn-primary">Primary</button>
    <button class="button btn-raised btn-success">Success</button>
    <button class="button btn-raised btn-warning">Warning</button>
    <button class="button btn-raised btn-info">Info</button>
  </div>
  <div class="row">
    <h1>Sized Buttons</h1>
    <button class="button btn-lg btn-raised">Large</button>
    <button class="button btn-raised">Default</button>
    <button class="button btn-sm btn-raised">Small</button>
  </div>
  <p class="footer">Made with <span></span> by <a href="fb.com/allefgarug"> Garug</a></p>
</div>
body {
  background: #f1f1f1;
  font-family: roboto;
}

* {
  box-sizing: border-box;
}

h1 {
  color: #aaa;
  padding-bottom: 10px;
  border-bottom: 1px solid;
}

a {
  color: #0098fe;
  text-decoration: none;
}

.container {
  width: 50%;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  margin-top: 50px;
  padding: 20px;
}

.footer {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top:  8px;
}

.footer span {
  color: red;
}

.row {
  margin-bottom: 15px;
}

/* Outline for some browsers */
button:focus {outline:0;}


/* === Start of style buttons */
.button {
  border: none;
  background: none;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 24px;
  background: none;
  border-radius: 4px;
  transition: all linear .2s, color .3s .1s, box-shadow .2s;
  font-family: roboto;
  cursor: pointer;
}

.button.btn-primary {
  color: #0098fe;
}

.button.btn-primary:hover, .button.btn-raised.btn-primary {
  background: #0098fe;
}

.button.btn-success {
  color: #2ecc71;
}

.button.btn-success:hover, .button.btn-raised.btn-success {
  background: #2ecc71;
}

.button.btn-warning {
  color: #e74c3c;
}

.button.btn-warning:hover, .button.btn-raised.btn-warning {
  background: #e74c3c;
}

.button.btn-info {
  color: #f1c40f;
}

.button.btn-info:hover, .button.btn-raised.btn-info {
  background: #f1c40f;
}

.button:hover {
  color: #fff;
  box-shadow: inset 0 50px 0 rgba(0,0,0,.15);
  transition: all linear .2s, color .3s, box-shadow .2s;
}

.button.btn-raised {
  background: #ccc;
  color: #fff;
  box-shadow: inset 0 -2px 0px rgba(0,0,0,.07), inset 0 0 0 rgba(0,0,0,.3);
}

.button.btn-raised:hover {
  opacity: 1;
  box-shadow: inset 0 -2px 0px rgba(0,0,0,0), inset 0 50px 0 rgba(0,0,0,.12);
}

.button.btn-lg {
  font-size: 1.1vw;
  padding: 15px 30px;
}

.button.btn-sm {
  font-size: .75vw;
  padding: 10px 20px;
}
// 19/10/2018

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.