Heute möchte ich euch mal einen etwas aufwändigerene Button Stil zeigen und zwar kann man ihn auch als 3D erstellen. Ja der Button wir hier nicht nur perspektifisch transformiert sondern auch noch in Scheiben geschnitten und dann angezeigt. Wenn man dann mit der Maus darüber fährt, gibts dann diesen Scheiben / Layer Effekt der sich aufklappt.

Video

HTML

<button>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span>Button</span>
   </button>

CSS

button {
    transform: rotate(-25deg) skew(25deg);
    transform-style: preserve-3d;
    position: relative;
    width: 100px;
    height: 32px;
    border: none;
    background: transparent;
    font-family: inherit;
}

button::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -5px;
    width: 100%;
    height: 10px;
    background: #2a2a2a;
    /* 2a2a2a */
    transform: skewX(-41deg);
}

button::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -9px;
    width: 9px;
    height: 100%;
    background: #2a2a2a;
    transform: skewY(-49deg);
}

button span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    color: #fff;
    font-size: 25px;
    transition: 100ms ease-in-out;
}

button:hover span {
    z-index: 1000;
    transition: 300ms;
    color: #fff;
}

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

button:hover span:nth-child(4) {
    transform: translate(30px, -30px);
    opacity: .8;
}

button:hover span:nth-child(3) {
    transform: translate(20px, -20px);
    opacity: .6;
}

button:hover span:nth-child(2) {
    transform: translate(10px, -10px);
    opacity: .4;
}

button:hover span:nth-child(1) {
    transform: translate(0px, -0px);
    opacity: .2;
}

button:active span:nth-child(5) {
    transform: translate(20px, -20px);
    opacity: 1;
}

button:active span:nth-child(4) {
    transform: translate(15px, -15px);

}

button:active span:nth-child(3) {
    transform: translate(10px, -10px);

}

button:active span:nth-child(2) {
    transform: translate(5px, -5px);

}

button:active span:nth-child(1) {
    transform: translate(0px, -0px);
}

button:nth-child(1):hover span {
    background: #52E19F;
}