<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.