网页按钮CSS样式生成器

标签使用介绍

<span class="button">Button</span>
                    

复制以下css样式到文件中就可以看到效果

<style type="text/css">
.button { 
     border-top: 1px solid #96d1f8;
     background: #65a9d7;
     background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
     background: -moz-linear-gradient(top, #3e779d, #65a9d7);
     padding: 5px 10px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
     box-shadow: rgba(0,0,0,1) 0 1px 0;
     text-shadow: rgba(0,0,0,.4) 0 1px 0;
     color: white;
     font-size: 14px;
     font-family: Arial, Helvetica, sans-serif;
     text-decoration: none;
     vertical-align: middle;
     cursor:pointer;
  }
  .button:hover { 
     border-top-color: #28597a;
     background: #28597a;
     color: #ccc;
  }
  .button:active { 
     border-top-color: #1b435e;
     background: #1b435e;
  }

</style>