[分享]css3按钮凹陷效果

CSS3是一种新型的CSS标准，它在许多方面都比之前的版本更加强大和灵活。其中一个很有用的特性就是能够创建凹陷效果的按钮。这种样式可以使按钮看起来更加立体和真实，从而提高用户的界面体验。.btn { ...

CSS3是一种新型的CSS标准，它在许多方面都比之前的版本更加强大和灵活。其中一个很有用的特性就是能够创建凹陷效果的按钮。这种样式可以使按钮看起来更加立体和真实，从而提高用户的界面体验。

.btn {
  background-color: #0077ff;
  border: none;
  color: #fff;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
.btn:before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  transition: all 0.5s;
  z-index: -1;
}
.btn:hover:before {
  top: 0;
  left: 0;
} 

以上是实现这种效果的CSS代码示例。首先，我们为按钮设置了一些通用的样式，如背景颜色、边框等。接下来，我们设置了按钮的位置为相对定位，并且给它设置了一个覆盖整个按钮的伪元素。这个伪元素的内容为空，它的位置和大小都是按照绝对定位方式进行设置的。同时，我们应用了一个旋转变换，使伪元素呈现出一个45度角的菱形形状。在默认状态下，这个伪元素的位置是跟按钮一样的，但是当用户鼠标悬停在按钮上方时，它会以平滑的动画效果跑到按钮的正中央。这样，就给用户带来了一种特殊的视觉感受。

在实际应用中，我们可以将此样式应用到任何的按钮元素上，只需简单地添加类名即可。同时，我们还可以通过调整CSS代码中的一些数值，来实现不同种类的凹陷效果。这种方法简单易行，代码也不复杂。在设计网页时，为按钮添加凹陷效果，可以让用户在使用过程中感受到更加有层次和真实的界面风格，这对提高用户体验是非常有帮助的。