首先，大家需要定义一个 HTML 的按钮元素，并为其添加一个样式类。这个样式类包含如下几个属性：
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-align: center;
font-size: 16px;
border: none;
border-radius: 5px;
}这个样式类表示按钮的基本样式，包括背景颜色、文字颜色、边框圆角等。接下来，大家需要为按钮添加进度条的样式。代码如下：
.btn.loading {
position: relative;
}
.btn.loading:before {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #f0f0f0;
z-index: -1;
}
.btn.loading.active:before {
width: 100%;
transition: width 2s ease-in-out;
}这段代码的含义是为按钮添加了一个伪元素 before，并将其定位到按钮的最前面，作为进度条的基本元素。在按钮添加了类名 loading 之后，大家再向 before 元素添加一个宽度为 100% 的 transition，来展示进度条的动画效果。而在按钮需要实现进度条的时候，大家再为其添加类名 active 即可。
最后，大家需要在 HTML 内容中调用这两个样式类。代码如下：
这里使用了两个按钮元素，其中一个元素没有添加 loading 类名，表示一个没有进度条的正常按钮；而另一个元素添加了 loading 类名，则表示一个正在提交的按钮，同时也展示了进度条的效果。
总体来说，使用 CSS3 制作按钮进度条是一件相对简单的事情。通过定义样式类，并嵌套使用伪元素及 transition 动画，大家可以轻松地实现各种风格的进度条效果。有了进度条这类交互设计元素，大家的网页交互设计将会更加生动有趣。