.bc-prism-button {
white-space: nowrap;
z-index: 1;
display: block;
--padding-prism-top: 10px; --padding-prism-bottom: 10px; --padding-prism-left: 10px; --padding-prism-right: 10px; --padding-prism-top-bottom: calc(var(--padding-prism-top) + var(--padding-prism-bottom));
--padding-prism-top-bottom-aux: calc(var(--padding-prism-top-bottom) / -2);
line-height: 1;
--font-size: 27px; font-size: var(--font-size);
width: fit-content;
height: calc(var(--padding-prism-top) + var(--padding-prism-bottom) + var(--font-size));
--perspective: 1000px; perspective: var(--perspective);
-webkit-perspective: var(--perspective);
--transition-duration: 0.5s; --ease: cubic-bezier(0.645, 0.045, 0.355, 1); }
.bc-prism-button .bc-prism-button__wrapper {
pointer-events: none;
display: grid;
position: relative;
width: fit-content;
height: 100%;
transform-origin: 50% 50% calc(var(--padding-prism-top-bottom-aux) + var(--font-size) / -2);
transform-style: preserve-3d;
will-change: transform;
transition: transform var(--transition-duration) var(--ease);
}
.bc-prism-button[data-from-top]:hover .bc-prism-button__wrapper {
transform: rotateX(-90deg);
}
.bc-prism-button[data-from-bottom]:hover .bc-prism-button__wrapper {
transform: rotateX(90deg);
}
.bc-prism-button .bc-prism-button__front-text {
width: 100%;
padding-top: var(--padding-prism-top);
padding-bottom: var(--padding-prism-bottom);
padding-left: var(--padding-prism-left);
padding-right: var(--padding-prism-right);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
z-index: 2;
text-align: center; color: #fff; background: #000; }
.bc-prism-button .bc-prism-button__back-text {
width: 100%;
padding-top: var(--padding-prism-top);
padding-bottom: var(--padding-prism-bottom);
padding-left: var(--padding-prism-left);
padding-right: var(--padding-prism-right);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
left: 0;
text-align: center; color: #499103; background: #fff; }
.bc-prism-button[data-from-top] .bc-prism-button__back-text {
bottom: 200%;
transform-origin: center bottom;
transform: rotateX(90deg);
}
.bc-prism-button[data-from-bottom] .bc-prism-button__back-text {
top: 0%;
transform-origin: center top;
transform: rotateX(-90deg);
}