CSS3 Rounded Button Set

Rounded buttons for <a>, <button> and <input> elements

Below you can find an example of CSS3 rounded buttons styles which you can apply to <a>, <button>, <input type="button" /> and <input type="submit" /> elements. You can change the size of the button by adding classes "tiny", "small", "big", "large" and "wide". You can also change the color of the button by switching 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: 9px 20px;
border: none;
background: #5a5a5a;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
text-decoration: none;
border-radius: 16px;
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: #666666;
}

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

.button.tiny {
font-size:12px;
border-radius:10px;
padding: 3px 12px 2px;
}

.button.small {
font-size:12px;
border-radius: 14px;
padding: 5px 15px;
}

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

.button.large {
font-size:20px;
padding: 16px 30px;
border-radius: 35px;
}

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

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

.button.primary {
background: #0080da;
}

.button.primary:hover {
background: #0096ff;
}

.button.success {
background: #1e824c;
}

.button.success:hover {
background: #25a25f;
}

.button.danger {
background: #e74c3c;
}

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

.button.warning {
background: #F9690E;
}

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

.button.info {
background: #10a8e0;
}

.button.info:hover {
background: #12bfff;
}

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