CSS3: Designing buttons with attributes

This entry is part 4 of 13 in the series CSS3

We will now design 3 buttons with a combination of attribute selectors, box shadow, border-radius, multiple backgrounds, and CSS gradients to achieve the effects as in the buttons below.
 
CSS Gradients

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Gradients</title>
    <style>
        input {
            border: none;
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            -webkit-border-radius: 10px;
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
            font: bold 1.2em Arial, Helvetica, sans-serif;
            margin: 0 10px 0 0;
            padding: 10px 10px 10px 10px;
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        }

        input[type='submit'] {
            background: #91BD09;
            background: -webkit-linear-gradient(#91BD09, #578730);
            background: -moz-linear-gradient(#91BD09, #578730);
            background: linear-gradient(#91BD09, #578730);
        }

        input[value='Cancel'] {
            background: #b53109;
            background: -webkit-linear-gradient(#b53109, #540303);
            background: -moz-linear-gradient(#b53109, #540303);
            background: linear-gradient(#b53109, #540303);
        }

        input[type='reset'] {
            background: #f0bb18;
            background: -webkit-linear-gradient(#f0bb18, #a46b07);
            background: -moz-linear-gradient(#f0bb18, #a46b07);
            background: linear-gradient(#f0bb18, #a46b07);
        }

    </style>
</head>
<body>

<input type='submit' id='submit' name='submit' value='Submit'/>
<input type='reset' id='reset' name='reset' value='Reset'/>
<input type='submit' id='cancel' name='cancel' value='Cancel'/>

</body>
</html>
Series Navigation<< CSS3: Making buttons with CSS gradients
CSS3: Animated button using transition on mouse hover >>