今天用CSS实现一下按钮按下凹陷和弹起凸起的效果。

先来看看效果吧：

html:

<div class="btn-list"><div class="btn active"><span class="btn-text">按钮1</span></div><div class="btn"><span class="btn-text">按钮2</span></div><div class="btn"><span class="btn-text">按钮3</span></div>
</div>

css:

.btn-list{position: absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;
}
.btn{margin: 0 15px;width: 80px;height: 30px;box-sizing: border-box;background-color: rgb(51, 85, 102);box-shadow: 0 7px 0 #243c47;transition: all .5s;text-align: center;line-height: 30px;border-radius: 10px;color: #fff;cursor: pointer;
}
.btn:hover{background-color: #1aaf5d;box-shadow: 0 7px 0 #0a7237;
}
.btn:hover .btn-text{transform: rotateX(5deg);}
.btn.active{background-color: #11767e;box-shadow: 0 4px 0 #243c47;  transform: translateY(4px); /* active时下移，按钮被按下的效果 */
}
.btn-text{transform: rotateX(15deg); /*旋转文字,让按钮和文字看起来更像一个整体*/display: inline-block;
}