<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fake 3d button</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<ul>
    <!--instagram-->
    <li>
    <a href="#">
        <i class="bi bi-instagram"></i>
          </svg>
        <span>instagram</span>
    </a>
    </li>
    <!--tiktok-->
    <li>
    <a href="#">
        <i class="bi bi-tiktok"></i>
        <span>tiktok</span>
    </a>
    </li>
    <!--line-->
    <li>
    <a href="#">
        <i class="bi bi-line"></i>
        <span>line</span>
    </a>
    </li>
</ul>
</body>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #ccc;
  font-family: sans-serif;
}
ul {
  display:flex;
  justify-content: center;
  align-items: center;//真ん中に配置する。
  width: 100%;
  height: 100vh;
}
ul li {
  list-style: none;
  margin: 0 10px;
  position: relative;
}
ul li a i {
  font-size: 30px;
  color: #333;
  transition: .3s;
  line-height: 80px;
  padding-right: 15px;
  transition: .3s;
}
ul li a span {
  letter-spacing: 2px;
  color: #333;
  transition: .3s;
  margin-left: 10px;
  font-weight: bolder;
}
ul li a {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 74px;
  background-color: #fff;
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transform: rotate(-30deg) skew(25deg);
  box-shadow: -25px 25px 25px rgba(0,0,0,.4);
  transition: .3s;
}
ul li a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  width: 20px;
  height: 100%;
  background-color: #888;
  transform: rotate(0deg) skewY(-45deg);
  transition: .3s;
}
ul li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  width: 100%;
  height: 20px;
  background-color: #adadad;
  transform: rotate(0deg) skewX(-45deg);
  transition: .3s;
}
ul li:hover a {
  transform: rotate(-30deg) skew(25deg) translate(10px, -10px);
  background-color: #46E678;
  box-shadow: -55px 55px 55px rgba(0,0,0,.3);
  color: #fff;
}
ul li:hover a i {
  color: #fff;
}
ul li:hover a span {
  color: #fff;
}
ul li:hover a::before {
  background-color: #57AF72;
}
ul li:hover a::after {
  background-color: #ABEFC0;
}
ul li:active a {
  transform: rotate(-30deg) skew(25deg) translate(0px, 0px);
  box-shadow: -15px 15px 15px rgba(0,0,0,.4);
  background-color: #fff;
}
ul li:active a i {
  color: #000;
}
ul li:active a span {
  color: #000;
}
ul li:active a::before {
  background-color: #888;
}
ul li:active a::after {
  background-color: #adadad;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.