首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

用 CSS 让你的按钮（button）更加迷人

作者: CodeBit     来源: CodeBit.cn     时间: 2007-05-29 23:41:54
摘要: 这篇文章教你用 CSS + 图片的方式制作漂亮的有点击效果的按钮，明白了原理，相信你也可以制作更加丰富的效果。
归类: (X)HTML/CSS,

关键词: 按钮, button, css,


这篇文章教你用 CSS 制作漂亮的有点击效果的按钮，明白了原理，相信你也可以制作更加丰富的效果。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


我们用 A 包含一个 SPAN 标签来实现此效果：

HTML:
  1.  
  2. <a class="button" href="#"><span>按钮文字</span></a> 
  3.  



设置按钮样式：

CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. a.button { 
  5.     background: transparent url('bg_button_a.gif') no-repeat scroll top right; 
  6.     color: #444; 
  7.     display: block; 
  8.     float: left; 
  9.     font: normal 12px arial, sans-serif; 
  10.     height: 24px; 
  11.     margin-right: 6px; 
  12.     padding-right: 18px; /* sliding doors padding */ 
  13.     text-decoration: none; 
  14. } 
  15.  
  16. a.button span { 
  17.     background: transparent url('bg_button_div.gif') no-repeat; 
  18.     display: block; 
  19.     line-height: 14px; 
  20.     padding: 5px 0 5px 18px; 
  21. } 
  22.  
  23. </style> 
  24.  



为按钮添加点击样式：

CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. a.button:active { 
  5.     background-position: bottom right; 
  6.     color: #000; 
  7.     outline: none; /* hide dotted outline in Firefox */ 
  8. } 
  9.  
  10. a.button:active span { 
  11.     background-position: bottom left; 
  12.     padding: 6px 0 4px 18px; /* push text down 1px */ 
  13. } 
  14.  
  15. </style> 
  16.  



由于 IE 下点击后不能还原到默认状态，因此，我们需要在标签里添加一段代码：

HTML:
  1.  
  2. <a class="button" href="#" onclick="this.blur(); return false;"><span>按钮文字</span></a> 
  3.  



如果你需要用它提交表单（FORM），那么可以在 onclick 里面添加一个提交语句，如：document.forms['theForm'].submit();


本文翻译自：
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

为了方便学习，本文并未完整翻译，如果你有兴趣，请直接浏览原文。


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)