html按钮圆弧样式,几款不错的按钮样式汇总

几款不错的按钮样式汇总

在网页设计中按钮一般默认的都比较“丑”，能不能通过一些好的`样式来设计呢，下面提供几款不错的按钮样式，希望对大家有所帮助。

一、带图标的按钮

·按钮样式截图

·按钮样式代码如下：

/* CSS Document */

/* BUTTONS */

.buttons a, .buttons button{     display:block;     float:left;     margin:0 7px 0 0;     background-color:#f5f5f5;     border:1px solid #dedede;     border-top:1px solid #eee;     border-left:1px solid #eee;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;     font-size:12px;     line-height:130%;     text-decoration:none;     font-weight:bold;     color:#565656;     cursor:pointer;     padding:5px 10px 6px 7px; /* Links */ } .buttons button{     width:auto;     overflow:visible;     padding:4px 10px 3px 7px; /* IE6 */ } .buttons button[type]{     padding:5px 10px 5px 7px; /* Firefox */     line-height:17px; /* Safari */ } *:first-child+html button[type]{     padding:4px 10px 3px 7px; /* IE7 */ } .buttons button img, .buttons a img{     margin:0 3px -3px 0 !important;     padding:0;     border:none;     width:16px;     height:16px; }

/* STANDARD */

button:hover, .buttons a:hover{     background-color:#dff4ff;     border:1px solid #c2e1ef;     color:#336699; } .buttons a:active{     background-color:#6299c5;     border:1px solid #6299c5;     color:#fff; }

/* POSITIVE */

button.positive, .buttons a.positive{     color:#529214; } .buttons a.positive:hover, button.positive:hover{     background-color:#E6EFC2;

border:1px solid #C6D880;     color:#529214; } .buttons a.positive:active{     background-color:#529214;     border:1px solid #529214;     color:#fff; }

/* NEGATIVE */

.buttons a.negative, button.negative{     color:#d12f19; } .buttons a.negative:hover, button.negative:hover{     background:#fbe3e4;     border:1px solid #fbc2c4;     color:#d12f19; } .buttons a.negative:active{     background-color:#d12f19;     border:1px solid #d12f19;     color:#fff; }

/* REGULAR */

button.regular, .buttons a.regular{     color:#336699; } .buttons a.regular:hover, button.regular:hover{

background-color:#dff4ff;     border:1px solid #c2e1ef;     color:#336699; } .buttons a.regular:active{     background-color:#6299c5;     border:1px solid #6299c5;     color:#fff; }

二、圆角按钮样式

·按钮样式图片

·样式代码如下：

Untitled Document