悬停效果按钮 CSS

悬停效果按钮是网页设计中经常用到的一种效果，它可以让按钮在鼠标移动到上面时变换颜色、形状等，提高用户交互体验。在 CSS 中，我们可以使用伪类选择器 :hover 来实现悬停效果按钮。

实现步骤

1.创建一个按钮的 HTML 代码：

<button class="hover-btn">Hover me!</button>

2.为按钮添加样式，定义按钮的大小、颜色、边框等属性。

.hover-btn {
  display: inline-block;    /* 内容块状显示，让按钮块级显示 */
  padding: 10px 20px;       /* 定义按钮的内边距 */
  font-size: 18px;          /* 定义按钮字体大小 */
  font-weight: bold;        /* 定义按钮字体粗细 */
  text-align: center;       /* 定义按钮内部文字居中显示 */
  text-decoration: none;    /* 定义文字无下划线 */
  color: #fff;              /* 定义文字颜色为白色 */
  background-color: #007bff; /* 定义按钮背景颜色 */
  border: none;             /* 定义无边框 */
  border-radius: 5px;       /* 定义圆角边框 */
  transition: background-color 0.5s ease; /* 定义颜色变换过渡动画 */
}

3.为按钮添加悬停效果，定义按钮在鼠标悬停时的颜色、形状等属性。

.hover-btn:hover {
  background-color: #0069d9; /* 鼠标悬停时的背景颜色 */
  cursor: pointer;           /* 鼠标悬停时的箭头样式 */
}

4.完整代码：

<button class="hover-btn">Hover me!</button>

<style>
  .hover-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.5s ease;
  }

  .hover-btn:hover {
    background-color: #0069d9;
    cursor: pointer;
  }
</style>

总结

悬停效果按钮是 CSS 中常用的一种效果，通过使用伪类选择器 :hover，定义鼠标悬停时的样式，我们可以轻松实现一个简单的悬停效果按钮。除了可以改变背景颜色、形状等，我们还可以通过 JavaScript 给按钮添加更复杂的交互效果，提高用户体验。