<!DOCTYPE html>
<html lang="en">

<!-- Made By A 12 Year Old Boy For His Favorite Youtuber Kevin Powell -->

<head>
  <meta charset="UTF-8">
  <title>Kevin Powell is cool</title>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

</head>

<body>
  <ul>
    <li>
      <a href="#" onclick="kevin()">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-css3-alt"> </span>
      </a>

    </li>
  </ul>
</body>

</html>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

ul {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  margin: 0 30px;
  transform: rotate(-30deg) skew(25deg);
}

ul li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: teal;
  transition: 0.5s;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px !important;
}

ul li:hover span:nth-child(5) {
  transform: translate(40px, -40px);
  opacity: 1;
}

ul li:hover span:nth-child(4) {
  transform: translate(30px, -30px);
  opacity: 0.8;
}

ul li:hover span:nth-child(3) {
  transform: translate(20px, -20px);
  opacity: 0.6;
}

ul li:hover span:nth-child(2) {
  transform: translate(10px, -10px);
  opacity: 0.4;
}

ul li:hover span:nth-child(1) {
  transform: translate(0, 0);
  opacity: 0.2;
}

/* ul li:nth-child(1) span {
    background: teal;
}
 */

function kevin() {
  alert("Done With Pure CSS & A Font Awesome Icon");
  let q = prompt("So How Many Stars Do U Give The 3d CSS Button");
  if (q >= 3) {
    alert("thank you so much, glad u liked it");
  } else {
    alert("thank you so much, I will Try My best To Make This Better");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.