CSS3 Gradient Buttons Set

Gradient buttons with rounded corners for <a>, <button> and <input> elements

Example below illustrates how to create css3 buttons with gradient out of <a>, <button>, <input type="button" /> and <input type="submit" />. The size of the button can be changed by switching classes "tiny", "small", "big", "large" and "wide". You can 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;
background: linear-gradient(#aaa, #757575);
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;
-webkit-appearance: none;
text-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.button:focus {
outline:none;
}

.button:hover {
background: linear-gradient(#b8b8b8, #828282);
}

.button:active {
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.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;
}

.button.large {
font-size:20px;
padding: 16px 24px;
}

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

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

.button.primary {
background: linear-gradient(#0080da, #0048c6);
}

.button.primary:hover {
background: linear-gradient(#008aeb, #0054e8);
}

.button.success {
background: linear-gradient(#75bb48, #219351);
}

.button.success:hover {
background: linear-gradient(#81ce4f, #239c56);
}

.button.danger {
background: linear-gradient(#eb5d3d, #bd3e31);
}

.button.danger:hover {
background: linear-gradient(#ff6d4c, #d34537);
}

.button.warning {
background: linear-gradient(#f2c200, #d2a800);
}

.button.warning:hover {
background: linear-gradient(#efc000, #e1b400);
}

.button.info {
background: linear-gradient(#56a9e0, #4778c1);
}

.button.info:hover {
background: linear-gradient(#6ec0f7, #538ce1);
}

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