利用CSS制作个性化按钮

在设计网页时，许多设计师喜欢将死板的windows默认按钮制作成漂亮的自定义样式，显得整个网页风格整齐统一，而且还能现出设计师的用心和设计功底。 

但这种设计给网页制作者带来了一些小小的麻烦，因为给按钮定义样式也是网页制作新手的一项小工程，所谓熟能生巧、会者不难，只要积累足够的经验并熟练掌握CSS，做个按钮也不是什么难事。闲话不多说了，入正题。  在网页中插入一个按钮很简单，只要在dreamweaver中点击插入按钮的图标就可以了，随后网页中会插入按钮的代码：  
  
  

   
   <input type="submit" name="Submit" value="提交" />
  
  
  这个按钮在页面中的样式是随windows的主题变化的，也就是windows的按钮默认样式，如图一。  一个网站，应该有一套自己的风格，所以页面中的按钮风格也应该统一，这样我们就可以对网页中所有的按钮进行统一定义，比如网站的整体按钮风格都和图二中的一样，那就非常好定义了，只要设置input的样式就行。  
  
  

   
   * { margin:0; padding:0; 
   
   border:0; }  input { background:#000; height:21px; line-height:21px; color:#FFF; width:60px; cursor:pointer; }
  
  
  经过这样定义后，所有网页中的按钮都会变成黑底白字的效果，但有人会发现，连输入框也变成了黑底白色字，这可如何是好？  很简单，要么使用默认的输入框，将上面定义的按钮样式变成一个class，比如.btnstyle1，.btnstyle2，或者再定义一个输入框的class，比如.iptcss1,.iptcss2，当不想让输入框为黑色时引用它就可以了。  再如果，页面中的按钮出现了图三中的那两种样式圆角的按钮怎么办？同样很简单，做一张背景图，然后定一个class，用图片作为按钮的背景就可以了。  
  
  

   
   .cr_btn { background:url(btnbg/inputbg.gif) no-repeat; width:49px; height:21px; line-height:21px; color:#FFF; font-weight:bold; }
  
  
  用CSS美化按钮就这么简单，自己动手做一做吧。