Cube Button

Hi. Have you found the solution yet? If yes, can you share here? Thank you.

No, have not received a solution. Most are suggesting to use an image vs. button which is not what I want to do

If you want this button, I can give the code

@tuanphan I would love that!

17 hours ago, jdillagodzilla said:

@tuanphan I would love that!

Add a Code Block

<a class="button tuan" href="#">Press me!</a>
<style>
.button::before, .button::after {
  position: absolute;
  content: '';
  -webkit-transition: all .5s;
  transition: all .5s;
}

.button {
  display: inline-block;
  padding: 20px 40px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  vertical-align: middle;
  font-family: 'Rubik One', sans-serif;
  text-decoration: none;
  font-size: 4vw;
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: #3498db;
}
.button::before {
  bottom: -15px;
  height: 15px;
  width: 100%;
  left: 8px;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
  background-color: #196090;
}
.button::after {
  right: -15px;
  height: 100%;
  width: 15px;
  bottom: -8px;
  -webkit-transform: skewY(45deg);
          transform: skewY(45deg);
  background-color: #124364;
}
.button:active {
  margin-left: 10px;
  margin-top: 10px;
}
.button:active::before {
  bottom: -5px;
  height: 5px;
  left: 3px;
}
.button:active::after {
  right: -5px;
  width: 5px;
  bottom: -3px;
}
</style>