.three-d-button {
display: block;
text-align: center;
transition: all .3s ease-in-out;
margin-bottom: 10px;
position: relative;
}
.three-d-button div {
font-weight: bold;
}
.box-foreground {
padding: 6px 20px;
border-width: 2px;
border-style: solid;
}   .three-d-button.light .box-foreground {
color: white;
border-color: white;
background-color: var(--e-global-color-primary);
position: relative;
z-index: 1;
transition: all .3s ease-in-out;
}
.three-d-button.light .box-background {
position: absolute;
left: 10px;
top: 10px;
width: 100%;
height: 100%;
border-right: 2px solid white;
border-bottom: 2px solid white;
transition: all .3s ease-in-out;
} .three-d-button.light .box-foreground::before {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid white;
bottom: -13px;
transform: rotate(-45deg);
left: 3px;
transition: all .3s ease-in-out;
}
.three-d-button.light .box-foreground::after {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid white;
top: -3px;
transform: rotate(-45deg);
right: -8px;
transition: all .3s ease-in-out;
}
.three-d-button.light .box-background::after {
content: '';
position: absolute;
width: 1px;
height: 14px;
border: 1px solid white;
display: block;
bottom: -3px;
right: 3px;
transform: rotate(-45deg);
transition: all .3s ease-in-out;
}   .three-d-button.dark .box-foreground {
color: var( --e-global-color-text );
border-color: var( --e-global-color-text );
background-color: white;
position: relative;
z-index: 1;
transition: all .3s ease-in-out;
}
.three-d-button.dark .box-background {
position: absolute;
left: 10px;
top: 10px;
width: 100%;
height: 100%;
border-right: 2px solid var( --e-global-color-text );
border-bottom: 2px solid var( --e-global-color-text );
transition: all .3s ease-in-out;
} .three-d-button.dark .box-foreground::before {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid var( --e-global-color-text );
bottom: -13px;
transform: rotate(-45deg);
left: 3px;
transition: all .3s ease-in-out;
}
.three-d-button.dark .box-foreground::after {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid var( --e-global-color-text );
top: -3px;
transform: rotate(-45deg);
right: -8px;
transition: all .3s ease-in-out;
}
.three-d-button.dark .box-background::after {
content: '';
position: absolute;
width: 1px;
height: 14px;
border: 1px solid var( --e-global-color-text );
display: block;
bottom: -3px;
right: 3px;
transform: rotate(-45deg);
transition: all .3s ease-in-out;
}   .three-d-button.colored .box-foreground {
color: var( --e-global-color-primary );
border-color: var( --e-global-color-primary );
background-color: white;
position: relative;
z-index: 1;
transition: all .3s ease-in-out;
}
.three-d-button.colored .box-background {
position: absolute;
left: 10px;
top: 10px;
width: 100%;
height: 100%;
border-right: 2px solid var( --e-global-color-primary );
border-bottom: 2px solid var( --e-global-color-primary );
transition: all .3s ease-in-out;
} .three-d-button.colored .box-foreground::before {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid var( --e-global-color-primary );
bottom: -13px;
transform: rotate(-45deg);
left: 3px;
transition: all .3s ease-in-out;
}
.three-d-button.colored .box-foreground::after {
content: '';
display: block;
width: 1px;
height: 14px;
position: absolute;
border: 1px solid var( --e-global-color-primary );
top: -3px;
transform: rotate(-45deg);
right: -8px;
transition: all .3s ease-in-out;
}
.three-d-button.colored .box-background::after {
content: '';
position: absolute;
width: 1px;
height: 14px;
border: 1px solid var( --e-global-color-primary );
display: block;
bottom: -3px;
right: 3px;
transform: rotate(-45deg);
transition: all .3s ease-in-out;
}   a.three-d-button:hover {
transform: translate(5px, 5px);
}
a.three-d-button:hover .box-background {
left: 5px;
top: 5px;
}
a.three-d-button:hover .box-foreground::before {
height: 8px;
bottom: -8px;
left: 1px;
}
a.three-d-button:hover .box-foreground::after {
height: 8px;
top: -3px;
right: -4px;
}