css实现按钮凸起和凹陷效果

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

先来看看效果吧：

html:

<div class="btn-list">
  <div class="btn active">
    <span class="btn-text">按钮1span>
  div>
  <div class="btn">
    <span class="btn-text">按钮2span>
  div>
  <div class="btn">
    <span class="btn-text">按钮3span>
  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;
}