HTML 可以使用进度条和按钮来构建交互式用户界面。下面是创建这些元素的基本步骤：
在 HTML 中，可以使用标签<progress>来创建进度条。例如，下面的代码将创建一个最大值为100的进度条，并将当前值设置为50：
<progress max="100" value="50"></progress>可以通过 CSS 来自定义进度条的外观，例如：
progress {
background-color: #eee;
border: solid 1px #ccc;
height: 20px;
width: 200px;
}
progress::-webkit-progress-value {
background-color: #0077ff;
}上述代码使进度条具有浅灰色背景和深灰色边框。进度条的高度为 20 像素，宽度为 200 像素。此外，我们使用 ::-webkit-progress-value 伪元素来定制进度条的填充颜色为蓝色。
在 HTML 中，可以使用标签<button>来创建按钮。例如，下面的代码将创建一个带有“点击我”文本的按钮：
<button>点击我</button>可以通过 CSS 来自定义按钮的外观，例如：
button {
background-color: #0077ff;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
text-align: center;
text-decoration: none;
width: 120px;
}上述代码使按钮具有蓝色背景和圆角矩形边框。按钮的文本颜色为白色，鼠标指针在悬停时会变为手指形态。按钮的字体大小为 16 像素，内边距为 10 像素。此外，我们将按钮的宽度设置为 120 像素，以使其大小适合页面布局。
总之，以上是创建交互式进度条和漂亮的按钮的基本步骤和示例代码。必要时，我们可以通过 CSS 继续自定义这些元素的外观，例如更改颜色、字体、大小等其他属性。