CSS引导刷新图标 - HTML

在Web开发中，我们经常需要为网站添加一个刷新页面的按钮。在本文中，我们将讨论如何使用CSS和HTML创建引导刷新图标。

HTML代码

首先，我们需要为刷新按钮创建基本的HTML代码。代码如下：

<button class="refresh-btn" onclick="location.reload()">
  <i class="fa fa-refresh"></i>
</button>

以上HTML代码创建了一个使用Font Awesome图标库的按钮，并在按钮上添加了一个名为“refresh-btn”的CSS类。我们还为按钮添加了一个点击事件，当用户单击该按钮时，它将调用location.reload()方法来刷新当前页面。

CSS代码

接下来，我们需要添加CSS样式来创建引导刷新图标。以下是样式代码：

.refresh-btn {
  margin: 2em auto;
  display: block;
  border: none;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  font-size: 2em;
  width: 3em;
  height: 3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.refresh-btn:hover {
  background-color: #0056b3;
}
.refresh-btn:focus {
  outline: none;
}
.refresh-btn i {
  padding-top: 0.1em;
}

我们为按钮的“refresh-btn”类添加了上面这些样式。这些样式用于创建一个圆形的按钮，并将其颜色设置为蓝色。使用border-radius属性，我们将按钮的所有边缘设置为50％，使其成为圆形形状。我们为按钮添加了一些动画效果，并在<i>标签中添加了Font Awesome“fa-refresh”图标。

效果

现在，我们已经创建了完整的HTML和CSS代码，我们可以在浏览器中运行程序并查看我们的引导刷新图标。点击该按钮，就可以刷新页面了。

示例图：

结论

在本文中，我们讨论了如何使用CSS和HTML来为网站添加一个引导刷新图标。在创建按钮之前，我们需要添加一个基本的HTML代码，并使用CSS样式来设计我们的按钮。最后，我们为按钮添加了一个单击事件，以便在点击该按钮时，可以刷新当前页面。