CSS3 Raised Button Set

Raised buttons with rounded corners and bottom shadow

Below, you can find an example of css3 buttons style, which can be applied to <a>, <button>, <input type="button" /> and <input type="submit" /> elements just by adding "button" class to them. You can change the size of the button by using classes "tiny", "small", "big", "large" and "wide" and also change the style of the button by using classes "primary", "hollow", "success", "danger", "warning" and "info". Example also includes different effects on button hover and focus. 

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="button-container">
<a class="button hollow">Hollow</a>
<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button success">Success</a>
<a class="button danger">Danger</a>
<a class="button warning">Warning</a>
<a class="button info">Info</a>
</div>

<div class="button-container">
<button class="button tiny primary">Tiny</button>
<button class="button small primary">Small</button>
<button class="button primary">Default</button>
<button class="button big primary">Big</button>
<button class="button large primary">Large</button>
</div>

<div class="button-container max-320">
<input type="button" class="button large primary wide" value="WIDE BUTTON">
</div>
HTML
@charset "UTF-8";

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
text-align: center;
padding: 50px;
font-family:Arial, sans-serif;
font-size:100%;
}

.button-container {
max-width:700px;
margin: 0 auto;
}

.button-container .button {
margin-bottom: 10px;
}

.button-container.max-320 {
max-width:320px;
}

/* Buttons */

.button {
display: inline-block;
padding: 8px 10px;
border: none;
border-bottom: 3px solid rgba(0,0,0,0.25);
background: #aaa;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
transition: background-color 300ms ease-out;
-webkit-appearance: none;
}

.button:focus {
outline:none;
}

.button:hover {
background: #b7b7b7;
}

.button:active {
transform: scale(0.98);
}

.button.tiny {
font-size:12px;
padding: 3px 8px 2px;
}

.button.small {
font-size:12px;
padding: 5px 8px;
}

.button.big {
font-size:16px;
padding: 12px 18px;
border-bottom-width: 4px;
}

.button.large {
font-size:20px;
padding: 16px 24px;
border-bottom-width: 5px;
}

.button.hollow {
border: 1px solid #ddd;
background: none;
color: #666;
}

.button.hollow:hover {
background: #eee;
}

.button.primary {
background: #0073c4;
}

.button.primary:hover {
background: #0082df;
}

.button.success {
background: #27ae60;
}

.button.success:hover {
background: #2bbf69;
}

.button.danger {
background: #e74c3c;
}

.button.danger:hover {
background: #ff6251;
}

.button.warning {
background: #f1c40f;
}

.button.warning:hover {
background: #ffcf10;
}

.button.info {
background: #3498db;
}

.button.info:hover {
background: #3aa9f3;
}

.button.wide {
width:100%;
}
CSS
Browser support:
           
8+