固定页脚按钮 css - Html (1)

📌 相关文章

📜 固定页脚按钮 css - Html (1)

📅 最后修改于: 2023-12-03 15:37:13.600000 🧑 作者: Mango

固定页脚按钮 CSS - HTML

在网页中，有时候我们需要在页面底部设置一个固定的按钮，让用户可以方便地执行某些操作（如回到顶部、刷新页面等）。下面是一些 CSS 和 HTML 代码，可以实现这一功能。

CSS 代码

首先，我们给按钮设置一些基本样式，比如按钮的位置、背景色、字体颜色等等。这里我们使用绝对定位（position: fixed）将按钮固定在页面底部。

.button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

HTML 代码

为了使用这个 CSS 样式，我们需要在 HTML 中添加一个按钮元素，并为其添加一个 .button 类。

<button class="button">点击</button>

完整代码

下面是完整的 HTML 和 CSS 代码，可以直接复制粘贴使用。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
</style>
</head>
<body>

<button class="button">点击</button>

</body>
</html>

以上就是实现固定页脚按钮的 CSS 和 HTML 代码了。