css按钮悬停显示阴影如何实现_使用::after和box-shadow结合:hover-css教程-PHP中文网

css按钮悬停显示阴影如何实现_使用::after和box-shadow结合:hover

P粉602998670

发布： 2025-12-18 10:46:03

原创

819人浏览过

答案是通过CSS的:hover和::after实现按钮悬停阴影效果。具体为：按钮默认隐藏伪元素，悬停时扩展带box-shadow的::after，配合透明度与尺寸过渡，形成平滑扩散的阴影动画，提升视觉层次与交互细腻度。

css按钮悬停显示阴影如何实现_使用::after和box-shadow结合:hover

要实现CSS按钮在悬停时显示阴影，并使用 ::after 伪元素结合 box-shadow 和 :hover，可以通过控制伪元素的显示状态和阴影效果来增强视觉反馈。这种方式比直接改变元素本身更灵活，能做出更细腻的动画效果。

基本原理说明

利用 :hover 触发状态变化，通过 ::after 在按钮上动态添加一个带有阴影的图层。默认情况下隐藏该图层，悬停时显示并加上过渡动画，实现平滑出现的阴影效果。

HTML结构

一个简单的按钮标签：

<button class="shadow-btn">悬停试试</button>

登录后复制

CSS样式实现

核心是设置 ::after 的初始透明、无尺寸，并在 :hover 时扩展并显示阴影：

.shadow-btn {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.shadow-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  pointer-events: none;
}

.shadow-btn:hover::after {
  width: 120%;
  height: 160%;
  opacity: 1;
}

登录后复制