CSS凹型导航按钮效果的实现代码

下面是关于“CSS凹型导航按钮效果的实现代码”的完整攻略。

1. 实现思路

要实现凹型导航按钮效果，需要首先确定按钮的基本样式，包括按钮的颜色、大小、边框等，然后通过box-shadow属性在按钮的四个角上添加凹影，通过linear-gradient属性实现按钮的渐变效果，最后通过transition属性给按钮添加过渡效果，使其在被点击时可以有更好的视觉反馈。

2. 代码实现

示例1

以下是一个比较基础的凹型导航按钮实现代码：

.btn {
  background: #fca311;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  box-shadow: 2px 2px 10px #d99c33, -2px -2px 10px #ffb347;
  transition: all 0.25s ease-in-out;
}

.btn:hover {
  box-shadow: 4px 4px 20px #d99c33, -4px -4px 20px #ffb347;
}

在这个示例中，我们使用了一个class为btn的按钮样式，设置了按钮的基本样式，如背景颜色、字体颜色、字体大小、内边距、边框半径等，同时使用了box-shadow属性添加了两个凹影，一个位于右下方，一个位于左上方。还使用了transition属性来添加过渡效果，使得按钮在hover时可以有更好的过渡效果。

示例2

以下示例是一个稍微更为高级一点的凹型导航按钮效果实现代码：

.btn {
  background: linear-gradient(to bottom, #ebf8e1 0%, #c8e6c9 100%);
  color: #333;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  box-shadow: 2px 2px 10px #97c158, -2px -2px 10px #eff7cb;
  transition: all 0.25s ease-in-out;
  position: relative;
  overflow: hidden;
}

.btn:before, .btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.3s ease;
}

.btn:before {
  width: 100px;
  height: 100px;
}

.btn:after {
  width: 140px;
  height: 140px;
}

.btn:hover:before, .btn:hover:after {
  width: 140px;
  height: 140px;
}

在这个示例中，我们使用了与示例1类似的基本样式设置，但是使用了linear-gradient属性实现了一个渐变效果，让按钮看起来更加具有视觉层次感。同时，我们还定义了两个伪元素before和after，在按钮的中心位置创建了两个圆形元素，并使用transition来实现元素宽高的过渡效果，使得当鼠标悬浮在按钮上时，圆形元素能够动态扩大。这个示例相比于示例1，动画效果更加华丽，也更加复杂一些。