纯 CSS 按钮

CSS 按钮可以让网页更具交互性和美观性。在本文中，我们将介绍如何使用纯 CSS 创建美观的按钮。

1.基础按钮

我们从创建一个基础按钮开始。HTML 代码如下：

<button class="basic-btn">Click Me</button>

我们使用 .basic-btn class 来定义按钮的样式，CSS 代码如下：

.basic-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

我们设置了背景颜色，没有边框，字体颜色为白色，内边距为 10px 上下和 20px 左右，文字居中，去除了文字的下划线，行高与按钮高度相同，字体大小为 16px，并且设置了 4px 的外边距和 5px 的边框半径。

演示效果：

Click Me

2.悬浮效果

用户悬浮在按钮上时，我们希望按钮能够变得更加活跃，并在用户点击时提供反馈。我们可以使用 CSS hover 伪类来实现悬停效果。HTML 代码如下：

<button class="hover-btn">Hover Me</button>

CSS 代码如下：

.hover-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition-duration: 0.4s;
  overflow: hidden;
}

.hover-btn:hover {
  background-color: #3e8e41;
}

在 .hover-btn class 中，我们添加了 transition 属性来控制悬停时的过渡动画。在 .hover-btn:hover class 中，我们改变了背景颜色来实现悬停效果。

演示效果：

Hover Me

3.按下效果

当用户按下按钮时，我们需要一个反馈效果来让用户知道他们的操作被接受了。我们可以使用 CSS active 伪类来实现按钮的按下效果。HTML 代码如下：

<button class="press-btn">Press Me</button>

CSS 代码如下：

.press-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition-duration: 0.4s;
  overflow: hidden;
}

.press-btn:active {
  background-color: #3e8e41;
  transform: translateY(4px);
}

在 .press-btn:active class 中，我们改变了背景颜色，并使用 transform 属性将按钮向下移动 4px。

演示效果：

Press Me

4.带图标按钮

在某些情况下，我们希望按钮能够显示一个图标，而不仅仅是文字。我们可以使用 CSS 伪元素来添加图标。HTML 代码如下：

<button class="icon-btn"> <span class="icon"></span> Click Me</button>

CSS 代码如下：

.icon-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
}

.icon-btn .icon {
  content: "";
  width: 16px;
  height: 16px;
  background: url("https://via.placeholder.com/16x16") no-repeat center center;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translate(0,-50%);
}

.icon-btn:hover .icon {
  background: url("https://via.placeholder.com/16x16/0000FF") no-repeat center center;
}

在 .icon-btn class 中，我们设置了 position:relative，使我们更容易使用 position:absolute 来定位图标。

当我们将鼠标悬浮在按钮上时，我们改变了图标的背景颜色。

演示效果：

Click Me

5.带下拉菜单按钮

有时候我们需要一个下拉菜单按钮，来显示更多选项。我们可以使用 CSS 和 JavaScript 来创建这个按钮。HTML 代码如下：

<div class="dropdown">
  <button class="drop-btn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS 代码如下：

.dropdown {
  position: relative;
  display: inline-block;
}

.drop-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  width: 200px;
  right: 0;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
}

.dropdown-content a {
  color: black;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

在 .dropdown class 中，我们使用 position:relative，使我们更容易使用 position:absolute 来定位下拉菜单。

在 .dropdown-content class 中，我们设置 display:none 隐藏下拉菜单，并使用 padding 和 border-radius 来增加下拉菜单的美观感。

演示效果：

以上就是纯 CSS 按钮的基础知识。希望对你有所帮助！