本节书摘来自华章社区《响应式web设计：html5和css3实践指南》一书中的第1章，第1.8节基于css3按钮的进度条，作者（美） benjamin lagrone，更多章节内容可以访问云栖社区“华章社区”公众号查看
1.8 基于css3按钮的进度条
和其他网站一样，你的网站也需要去迎合那些急性子的用户。如果你的网站有一个可提交的表单，访客可能会不耐烦地多次单击“提交”按钮，因为你的页面加载新内容不够快。这可能会导致一个问题，就是表单多次提交同样的数据。
1.8.1 准备工作
为了防止这种行为，可以添加一些简单的视觉提示，告诉用户后台正在处理，请保持耐心。如果效果比较华丽，甚至可以给他们匆忙的生活增添点阳光。这个方法不需要任何图像，只需要使用css创建一个漂亮的渐变式提交按钮。本节内容很长，你可以先停下来喝杯咖啡。
1.8.2 实现方式
可以先创建一个包含几个文本框和一个提交按钮的表单。然后，为了使表单真的很酷，为文本框使用html5占位符属性。即使有占位符，这个表单还是相当单调。
注意，internet explorer 9还不支持此方法。
可以通过css给该按钮再添加一个hover效果。使用该属性，当鼠标指针移动到按钮上时，看起来就像它被按下一样。下面的css将给按钮添加黑色边框。
使用css3盒阴影及jquery可以实现一个简单的动画，在单击submit按钮后有一个跳动的光晕环绕着该按钮。使用jquery创建一个事件监听器来监听按钮的click事件。在click事件中作用于该表单按钮元素的一系列类将发生变化。脚本将动态添加partial-fade类到按钮元素中。
不要忘记添加jquery源码链接到head标签中：
哇！为了给该按钮实现这样一个小细节我们真是大费周章。但是这样的细节真正有助于制作一个漂亮的网站。这正是我喜欢用来给访客惊喜的细节之一。
1.8.3 工作原理
css3背景渐变可以使一个漂亮的按钮在不同浏览器上外观一致。渐变是复杂的，尤其是当前每个浏览器要求各自的css代码实现渐变。可以通过手动添加百分比和颜色控制渐变转效点（breakpoint）。当事件被触发时，添加盒阴影、边框及jquery使按钮产生有趣的效果。