Cube Button

Site URL: https://tuna-ladybug-3hgy.squarespace.com/guide

Hi All – 

Trying to code a button I designed. I've tried a box shadow but I can't find a way to create the lines to connect.

password for site is Uhhuh

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>