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 */
htmlbutton属性.ative, ative{ color:#d12f19; } .ative:hover, ative:hover{
background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } .ative:active{ background-
color:#d12f19; border:1px solid #d12f19; color:#fff; }
/* REGULAR */
background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } .ular:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; }
⼆、圆⾓按钮样式
·按钮样式图⽚
·样式代码如下：
Untitled Document
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论