按钮3D分层悬停效果

纯css3实现

index.html

style.css

* {
     margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Poppins", sans-serif;}html,body {
     display: grid;  height: 100%;  place-items: center;  background: #000;}.icons {
     display: inline-flex;}.icons a {
     margin: 0 25px;  text-decoration: none;  color: #fff;  display: block;  position: relative;}.icons a .layer {
     width: 55px;  height: 55px;  transition: transform 0.3s;}.icons a:hover .layer {
     transform: rotate(-35deg) skew(20deg);}.icons a .layer span {
     position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  border: 1px solid #fff;  border-radius: 5px;  transition: all 0.3s;}.icons a .layer span.fab {
     font-size: 30px;  line-height: 55px;  text-align: center;}.icons a:hover .layer span:nth-child(1) {
     opacity: 0.2;}.icons a:hover .layer span:nth-child(2) {
     opacity: 0.4;  transform: translate(5px, -5px);}.icons a:hover .layer span:nth-child(3) {
     opacity: 0.6;  transform: translate(10px, -10px);}.icons a:hover .layer span:nth-child(4) {
     opacity: 0.8;  transform: translate(15px, -15px);}.icons a:hover .layer span:nth-child(5) {
     opacity: 1;  transform: translate(20px, -20px);}.icons a:nth-child(1) .layer span,.icons a:nth-child(1) .text {
     color: #4267b2;  border-color: #4267b2;}.icons a:nth-child(2) .layer span,.icons a:nth-child(2) .text {
     color: #1da1f2;  border-color: #1da1f2;}.icons a:nth-child(3) .layer span,.icons a:nth-child(3) .text {
     color: #e1306c;  border-color: #e1306c;}.icons a:nth-child(4) .layer span,.icons a:nth-child(4) .text {
     color: #2867b2;  border-color: #2867b2;}.icons a:nth-child(5) .layer span,.icons a:nth-child(5) .text {
     color: #ff0000;  border-color: #ff0000;}.icons a:nth-child(1) .layer span {
     box-shadow: -1px 1px 3px #4267b2;}.icons a:nth-child(2) .layer span {
     box-shadow: -1px 1px 3px #1da1f2;}.icons a:nth-child(3) .layer span {
     box-shadow: -1px 1px 3px #e1306c;}.icons a:nth-child(4) .layer span {
     box-shadow: -1px 1px 3px #4267b2;}.icons a:nth-child(5) .layer span {
     box-shadow: -1px 1px 3px #ff0000;}.icons a .text {
     position: absolute;  height: 30px;  left: 50%;  bottom: -5px;  opacity: 0;  transform: translate(-50%);  transition: bottom 0.3s ease, opacity 0.3s ease;}.icons a:hover .text {
     bottom: -35px;  opacity: 1;}