几款不错的按钮样式汇总
在网页设计中按钮一般默认的都比较“丑”，能不能通过一些好的`样式来设计呢，下面提供几款不错的按钮样式，希望对大家有所帮助。
一、带图标的按钮
·按钮样式截图
·按钮样式代码如下：
/* CSS Document */
/* BUTTONS */
ons a, ons 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 */ } ons button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } ons button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } ons button img, ons a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; }
/* STANDARD */
button:hover, ons a:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } ons a:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; }
/* POSITIVE */
tive, ons tive{ color:#529214; } ons tive:hover, tive:hover{ background-color:#E6EFC2;
border:1px solid #C6D880; color:#529214; } ons tive:active{ background-color:#529214; border:1px solid #529214; color:#fff; }
/* NEGATIVE */
ons tive, tive{ color:#d12f19; } ons tive:hover, tive:hover{ background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } ons tive:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff; }
/* REGULAR */
lar, ons lar{ color:#336699; } ons lar:hover, lar:hover{
background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } ons lar:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; }
二、圆角按钮样式
·按钮样式图片
·样式代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
<!--
r { /* generic container (i.e. p) for floating buttons */
overflow: hidden;
width: 100%;
}
on {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
on span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
on:active {
background-position: bottom right;
