在网页设计中，UI界面设计是非常重要的一部分。不同的UI设计可以给用户带来不同的视觉体验，增强用户的黏着度和转化率。在UI设计中，按钮是非常重要的元素，常用于交互、操作和动作触发。在按钮的设计中，常常会使用到一种比较有立体感的效果，那就是凹陷效果。

.button {background-color: #4CAF50;border: none;color: white;padding: 12px 24px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 6px 4px;transition-duration: 0.4s;cursor: pointer;border-radius: 8px;}.button:hover {background-color: #3e8e41;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);transform: translateY(4px);}.button:active {transform: translateY(0);box-shadow: none;border-bottom: none;padding-top: 16px;}

上述代码是CSS实现按钮凹陷效果的方法。

首先，在CSS中定义按钮的基本样式，如背景色、边框、颜色、字体大小、内外边距等等。然后，在:hover伪类中，定义按钮的悬停效果，包括背景颜色、阴影、动态效果等。最后，在:active伪类中，定义按钮的点击效果，包括按钮向下移动、去掉阴影、去掉底部边框、增加顶部内边距等等。这样，就能够实现按钮表面凹陷的效果。

这种效果不仅可以应用在按钮、链接、图标等元素上，还可以应用在卡片、图形等元素的设计上，增加网页的立体感和质感。