index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu&display=swap');

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-size: 'Poppins', sans-serif;
}

body {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100vh;
     background-color: #e91e63;
     font-family: 'Poppins', sans-serif;
}

ul {
     display: flex;
     flex-wrap: wrap;
}

ul li {
     list-style: none;
     margin: 0 1.4rem;
}

ul li a i {
     font-size: 35px;
     color: #333;
     transition: 0.5s;
     padding-right: 1rem;
}

ul li a span {
     color: #333;
     letter-spacing: 2px;
     transition: 0.5s;
}

ul li a {
     display: flex;
     align-items: center;
     text-decoration: none;
     width: 13rem;
     height: 5rem;
     background: #fff;
     padding-left: 1.25rem;
     position: relative;
     transition: 0.5s;
}

ul li a::before {
     content: '';
     position: absolute;
     top: 10px;
     left: -20px;
     height: 100%;
     width: 1.25rem;
     background: #cecece;
     transition: 0.5s;
     transform: skewY(-45deg);
}

ul li a::after {
     content: '';
     position: absolute;
     bottom: -20px;
     left: -10px;
     height: 1.25rem;
     width: 100%;
     background: #cecece;
     transition: 0.5s;
     transform: skewX(-45deg);
}

ul li:hover i {
     color: #fff;
}

ul li:hover span {
     color: #fff;
}

ul li:hover a {
     background: #dd4b39;
     transform: translate(15px, -15px);
     box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

ul li:hover a::before {
     background: #b33a2b;
}

ul li:hover a::after {
     background: #b33a2b;
}

.like:hover a,
.like:hover a::after,
.like:hover a::before {
     background: #598af2;
}

.subscribe:hover a,
.subscribe:hover a::after,
.subscribe:hover a::before {
     background: #f20000;
}

.share:hover a,
.share:hover a::after,
.share:hover a::before {
     background: #7809f7;
}

@media screen and (max-width: 1040px) {
     ul {
          flex-direction: column;
     }
}