欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作。但是按钮button样式,是我们程序员最常用的。
 
  下面我们就给大家介绍一些好看的button样式,大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片,可以直接复制代码就可以了!
 
  注:源码里面使用了多种html标签做成按钮,有a,input,span,div,p,h3。总有适合你的标签
 
  button样式源码如下:
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <htmlxmlns="http://www.w3.org/1999/xhtml">
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
 
  <title>Demo:CSS3Buttons</title>
 
  <styletype="text/css">
 
  body{
 
  background:#ededed;
 
  width:900px;
 
  margin:30pxauto;
 
  color:#999;
 
  }
 
  p{
 
  margin:002em;
 
  }
 
  h1{
 
  margin:0;
 
  }
 
  a{
 
  color:#339;
 
  text-decoration:none;
 
  }
 
  a:hover{
 
  text-decoration:underline;
 
  }
 
  div{
 
  padding:20px0;
 
  border-bottom:solid1px#ccc;
 
  }
 
  /*button
 
  ----------------------------------------------*/
 
  .button{
 
  display:inline-block;
 
  zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/
 
  *display:inline;
 
  vertical-align:baseline;
 
  margin:02px;
 
  outline:none;
 
  cursor:pointer;
 
  text-align:center;
 
  text-decoration:none;
 
  font:14px/100%Arial,Helvetica,sans-serif;
 
  padding:.5em2em.55em;
 
  text-shadow:01px1pxrgba(0,0,0,.3);
 
  -webkit-border-radius:.5em;
 
  -moz-border-radius:.5em;
 
  border-radius:.5em;
 
  -webkit-box-shadow:01px2pxrgba(0,0,0,.2);
 
  -moz-box-shadow:01px2pxrgba(0,0,0,.2);
 
  box-shadow:01px2pxrgba(0,0,0,.2);
 
  }
 
  .button:hover{
 
  text-decoration:none;
 
  }
 
  .button:active{
 
  position:relative;
 
  top:1px;
 
  }
 
  .bigrounded{
 
  -webkit-border-radius:2em;
 
  -moz-border-radius:2em;
 
  border-radius:2em;
 
  }
 
  .medium{
 
  font-size:12px;
 
  padding:.4em1.5em.42em;
 
  }
 
  .small{
 
  font-size:11px;
 
  padding:.2em1em.275em;
 
  }
 
  /*colorstyles
 
  ----------------------------------------------*/
 
  /*black*/
 
  .black{
 
  color:#d7d7d7;
 
  border:solid1px#333;
 
  background:#333;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#666),to(#000));
 
  background:-moz-linear-gradient(top,#666,#000);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');
 
  }
 
  .black:hover{
 
  background:#000;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#000));
 
  background:-moz-linear-gradient(top,#444,#000);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
 
  }
 
  .black:active{
 
  color:#666;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#000),to(#444));
 
  background:-moz-linear-gradient(top,#000,#444);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');
 
  }
 
  /*gray*/
 
  .gray{
 
  color:#e9e9e9;
 
  border:solid1px#555;
 
  background:#6e6e6e;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#888),to(#575757));
 
  background:-moz-linear-gradient(top,#888,#575757);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');
 
  }
 
  .gray:hover{
 
  background:#616161;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#757575),to(#4b4b4b));
 
  background:-moz-linear-gradient(top,#757575,#4b4b4b);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');
 
  }
 
  .gray:active{
 
  color:#afafaf;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#575757),to(#888));
 
  background:-moz-linear-gradient(top,#575757,#888);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');
 
  }
 
  /*white*/
 
  .white{
 
  color:#606060;
 
  border:solid1px#b7b7b7;
 
  background:#fff;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#ededed));
 
  background:-moz-linear-gradient(top,#fff,#ededed);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
 
  }
 
  .white:hover{
 
  background:#ededed;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#dcdcdc));
 
  background:-moz-linear-gradient(top,#fff,#dcdcdc);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');
 
  }
 
  .white:active{
 
  color:#999;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#ededed),to(#fff));
 
  background:-moz-linear-gradient(top,#ededed,#fff);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');
 
  }
 
  /*orange*/
 
  .orange{
 
  color:#fef4e9;
 
  border:solid1px#da7c0c;
 
  background:#f78d1d;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#faa51a),to(#f47a20));
 
  background:-moz-linear-gradient(top,#faa51a,#f47a20);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');
 
  }
 
  .orange:hover{
 
  background:#f47c20;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#f88e11),to(#f06015));
 
  background:-moz-linear-gradient(top,#f88e11,#f06015);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');
 
  }
 
  .orange:active{
 
  color:#fcd3a5;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#f47a20),to(#faa51a));
 
  background:-moz-linear-gradient(top,#f47a20,#faa51a);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
 
  }
 
  /*red*/
 
  .red{
 
  color:#faddde;
 
  border:solid1px#980c10;
 
  background:#d81b21;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#ed1c24),to(#aa1317));
 
  background:-moz-linear-gradient(top,#ed1c24,#aa1317);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');
 
  }
 
  .red:hover{
 
  background:#b61318;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#c9151b),to(#a11115));
 
  background:-moz-linear-gradient(top,#c9151b,#a11115);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');
 
  }
 
  .red:active{
 
  color:#de898c;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#aa1317),to(#ed1c24));
 
  background:-moz-linear-gradient(top,#aa1317,#ed1c24);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');
 
  }
 
  /*blue*/
 
  .blue{
 
  color:#d9eef7;
 
  border:solid1px#0076a3;
 
  background:#0095cd;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#00adee),to(#0078a5));
 
  background:-moz-linear-gradient(top,#00adee,#0078a5);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');
 
  }
 
  .blue:hover{
 
  background:#007ead;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#0095cc),to(#00678e));
 
  background:-moz-linear-gradient(top,#0095cc,#00678e);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');
 
  }
 
  .blue:active{
 
  color:#80bed6;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#0078a5),to(#00adee));
 
  background:-moz-linear-gradient(top,#0078a5,#00adee);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');
 
  }
 
  /*rosy*/
 
  .rosy{
 
  color:#fae7e9;
 
  border:solid1px#b73948;
 
  background:#da5867;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#f16c7c),to(#bf404f));
 
  background:-moz-linear-gradient(top,#f16c7c,#bf404f);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
 
  }
 
  .rosy:hover{
 
  background:#ba4b58;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#cf5d6a),to(#a53845));
 
  background:-moz-linear-gradient(top,#cf5d6a,#a53845);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');
 
  }
 
  .rosy:active{
 
  color:#dca4ab;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#bf404f),to(#f16c7c));
 
  background:-moz-linear-gradient(top,#bf404f,#f16c7c);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');
 
  }
 
  /*green*/
 
  .green{
 
  color:#e8f0de;
 
  border:solid1px#538312;
 
  background:#64991e;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#7db72f),to(#4e7d0e));
 
  background:-moz-linear-gradient(top,#7db72f,#4e7d0e);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');
 
  }
 
  .green:hover{
 
  background:#538018;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#6b9d28),to(#436b0c));
 
  background:-moz-linear-gradient(top,#6b9d28,#436b0c);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');
 
  }
 
  .green:active{
 
  color:#a9c08c;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#4e7d0e),to(#7db72f));
 
  background:-moz-linear-gradient(top,#4e7d0e,#7db72f);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');
 
  }
 
  /*pink*/
 
  .pink{
 
  color:#feeef5;
 
  border:solid1px#d2729e;
 
  background:#f895c2;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#feb1d3),to(#f171ab));
 
  background:-moz-linear-gradient(top,#feb1d3,#f171ab);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');
 
  }
 
  .pink:hover{
 
  background:#d57ea5;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#f4aacb),to(#e86ca4));
 
  background:-moz-linear-gradient(top,#f4aacb,#e86ca4);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');
 
  }
 
  .pink:active{
 
  color:#f3c3d9;
 
  background:-webkit-gradient(linear,lefttop,leftbottom,from(#f171ab),to(#feb1d3));
 
  background:-moz-linear-gradient(top,#f171ab,#feb1d3);
 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <h1><ahref="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3GradientButtons</a></h1>
 
  <p><em>by</em><ahref="http://www.webdesignerwall.com">WebDesignerWall</a></p>
 
  <div>
 
  <ahref="#"class="buttonblack">Rectangle</a>or
 
  <ahref="#"class="buttonblackbigrounded">Rounded</a>Canbe
 
  <ahref="#"class="buttonblackmedium">Medium</a>or
 
  <ahref="#"class="buttonblacksmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonblack"type="button"value="InputElement"/>
 
  <buttonclass="buttonblack">ButtonTag</button>
 
  <spanclass="buttonblack">Span</span>
 
  <divclass="buttonblack">Div</div>
 
  <pclass="buttonblack">PTag</p>
 
  <h3class="buttonblack">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttongray">Gray</a>
 
  <ahref="#"class="buttongraybigrounded">Rounded</a>
 
  <ahref="#"class="buttongraymedium">Medium</a>
 
  <ahref="#"class="buttongraysmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttongray"type="button"value="InputElement"/>
 
  <buttonclass="buttongray">ButtonTag</button>
 
  <spanclass="buttongray">Span</span>
 
  <divclass="buttongray">Div</div>
 
  <pclass="buttongray">PTag</p>
 
  <h3class="buttongray">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonwhite">White</a>
 
  <ahref="#"class="buttonwhitebigrounded">Rounded</a>
 
  <ahref="#"class="buttonwhitemedium">Medium</a>
 
  <ahref="#"class="buttonwhitesmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonwhite"type="button"value="InputElement"/>
 
  <buttonclass="buttonwhite">ButtonTag</button>
 
  <spanclass="buttonwhite">Span</span>
 
  <divclass="buttonwhite">Div</div>
 
  <pclass="buttonwhite">PTag</p>
 
  <h3class="buttonwhite">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonorange">Orange</a>
 
  <ahref="#"class="buttonorangebigrounded">Rounded</a>
 
  <ahref="#"class="buttonorangemedium">Medium</a>
 
  <ahref="#"class="buttonorangesmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonorange"type="button"value="InputElement"/>
 
  <buttonclass="buttonorange">ButtonTag</button>
 
  <spanclass="buttonorange">Span</span>
 
  <divclass="buttonorange">Div</div>
 
  <pclass="buttonorange">PTag</p>
 
  <h3class="buttonorange">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonred">Red</a>
 
  <ahref="#"class="buttonredbigrounded">Rounded</a>
 
  <ahref="#"class="buttonredmedium">Medium</a>
 
  <ahref="#"class="buttonredsmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonred"type="button"value="InputElement"/>
 
  <buttonclass="buttonred">ButtonTag</button>
 
  <spanclass="buttonred">Span</span>
 
  <divclass="buttonred">Div</div>
 
  <pclass="buttonred">PTag</p>
 
  <h3class="buttonred">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonblue">Blue</a>
 
  <ahref="#"class="buttonbluebigrounded">Rounded</a>
 
  <ahref="#"class="buttonbluemedium">Medium</a>
 
  <ahref="#"class="buttonbluesmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonblue"type="button"value="InputElement"/>
 
  <buttonclass="buttonblue">ButtonTag</button>
 
  <spanclass="buttonblue">Span</span>
 
  <divclass="buttonblue">Div</div>
 
  <pclass="buttonblue">PTag</p>
 
  <h3class="buttonblue">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonrosy">Rosy</a>
 
  <ahref="#"class="buttonrosybigrounded">Rounded</a>
 
  <ahref="#"class="buttonrosymedium">Medium</a>
 
  <ahref="#"class="buttonrosysmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonrosy"type="button"value="InputElement"/>
 
  <buttonclass="buttonrosy">ButtonTag</button>
 
  <spanclass="buttonrosy">Span</span>
 
  <divclass="buttonrosy">Div</div>
 
  <pclass="buttonrosy">PTag</p>
 
  <h3class="buttonrosy">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttongreen">Green</a>
 
  <ahref="#"class="buttongreenbigrounded">Rounded</a>
 
  <ahref="#"class="buttongreenmedium">Medium</a>
 
  <ahref="#"class="buttongreensmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttongreen"type="button"value="InputElement"/>
 
  <buttonclass="buttongreen">ButtonTag</button>
 
  <spanclass="buttongreen">Span</span>
 
  <divclass="buttongreen">Div</div>
 
  <pclass="buttongreen">PTag</p>
 
  <h3class="buttongreen">H3</h3>
 
  </div>
 
  <div>
 
  <ahref="#"class="buttonpink">Pink</a>
 
  <ahref="#"class="buttonpinkbigrounded">Rounded</a>
 
  <ahref="#"class="buttonpinkmedium">Medium</a>
 
  <ahref="#"class="buttonpinksmall">Small</a>
 
  <br/><br/>
 
  <inputclass="buttonpink"type="button"value="InputElement"/>
 
  <buttonclass="buttonpink">ButtonTag</button>
 
  <spanclass="buttonpink">Span</span>
 
  <divclass="buttonpink">Div</div>
 
  <pclass="buttonpink">PTag</p>
 
  <h3class="buttonpink">H3</h3>
 
  </div>
 
  </body>
 
  </html>




本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j54106.shtml