实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px; width: 1000px; } .btn{ display: inline-block; padding: 0 30px; width: auto; height: 35px; font: 14px/35px 'microsoft yahei'; color: #fff; border: 0; border-radius: 3px; text-align: center; cursor: pointer; /*实现渐变（时间变化效果）*/ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .blueBtn{ background: #5dcbff; } /*蓝色按钮*/ .blueBtn:hover{ background: #40b6ee; } .orangeBtn{ background: #ff5700; }/*橙色按钮*/ .orangeBtn:hover{ background: #e25d18; } .violetBtn{ background: #6680ff; }/*紫色按钮*/ .violetBtn:hover{ background: #425de0; } .grayBtn{ background: #999; }/*灰色按钮*/ .grayBtn:hover{ background: #7f7f7f; } </style> </head> <body> <div class="container"> <span class="btn blueBtn">蓝色按钮</span> <span class="btn orangeBtn">橙色按钮</span> <span class="btn violetBtn">紫色按钮</span> <span class="btn grayBtn">灰色按钮</span> </div> </body> </html>
同理可应用在超链接、按钮等中