效果图：
html代码如下：
<a class="a_btn_standard">我的按钮</a><br>
<a class="a_btn_error">出错按钮</a><br>
<a class="a_btn_confirm">确认按钮</a><br>
<a class="a_btn_worning">警告按钮</a><br>css代码如下：
body { font-family: "微软雅黑"; color: #CDCDCD; }
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu { margin: 0; padding: 0; }
hr { border: none; border-top: 1px solid #cccccc; }
a { text-decoration:none;}
body h1, h2 { color: #000000; }
body input { height: 30px; width: 250px; font-size: 16px; font-family: "微软雅黑"; border: 1px solid #CDCDCD; }
.jerry_btn { display: block; text-align: center; height: 32px; width: 80px; line-height: 32px; background-color: #1f920b; cursor: pointer; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ -moz-box-shadow: 2px 2px 5px #909090; /*firefox*/ -webkit-box-shadow: 2px 2px 5px #909090; /*safari或chrome*/ box-shadow: 2px 2px 5px #909090; /*opera或ie9*/ }
.jerry_btn:hover { display: block; text-align: center; height: 32px; width: 80px; line-height: 32px; background-color: #2bcb10; cursor: pointer; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); /*ie*/ -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/ box-shadow: 2px 2px 10px #909090; /*opera或ie9*/ }
.a_btn_standard { width: 150px; height: 35px; line-height: 35px; display: block; text-align: center; cursor: pointer; color: #FFFFFF; background-color: #3b14ff; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_standard:hover { width: 150px; height: 35px; line-height: 35px; display: block; cursor: pointer; text-align: center; color: #FFFFFF; background-color: #515eff; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; box-shadow: 0 0 9px #515eff; -webkit-box-shadow: 0 0 9px #515eff; -moz-box-shadow: 0 0 9px #515eff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_error { width: 150px; height: 35px; line-height: 35px; display: block; text-align: center; cursor: pointer; color: #FFFFFF; background-color: #FF3333; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_error:hover { width: 150px; height: 35px; line-height: 35px; display: block; cursor: pointer; text-align: center; color: #FFFFFF; background-color: #fe4442; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; box-shadow: 0 0 9px #fe4442; -webkit-box-shadow: 0 0 9px #fe4442; -moz-box-shadow: 0 0 9px #fe4442; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_confirm { width: 150px; height: 35px; line-height: 35px; display: block; text-align: center; cursor: pointer; color: #FFFFFF; background-color: #1ea523; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_confirm:hover { width: 150px; height: 35px; line-height: 35px; display: block; cursor: pointer; text-align: center; color: #FFFFFF; background-color: #3ede30; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; box-shadow: 0 0 9px #3ede30; -webkit-box-shadow: 0 0 9px #3ede30; -moz-box-shadow: 0 0 9px #3ede30; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_worning { width: 150px; height: 35px; line-height: 35px; display: block; text-align: center; cursor: pointer; color: #FFFFFF; background-color: #e3b520; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }
.a_btn_worning:hover { width: 150px; height: 35px; line-height: 35px; display: block; cursor: pointer; text-align: center; color: #FFFFFF; background-color: #e9c44d; transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; outline: none; box-shadow: 0 0 9px #e9c44d; -webkit-box-shadow: 0 0 9px #e9c44d; -moz-box-shadow: 0 0 9px #e9c44d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=2); /*ie*/ }