Hello support team,
Is it possible to change the main survey button with the below example?
The CSS part is easy to implement, but what about this type of HTML button with <span> containers?
HTML<button class="pushable">
<span class="shadow"></span>
<span class="edge"></span>
<span class="front">OK! NEXT</span>
</button>
CSS<style>
.pushable {
position: relative;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
outline-offset: 4px;
transition: filter 250ms;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
background: hsl(0deg 0% 0% / 0.25);
will-change: transform;
transform: translateY(2px);
transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
.edge {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
background: linear-gradient(to left,
hsl(148deg, 96%, 16%) 0%,
hsl(148deg, 96%, 32%) 8%,
hsl(148deg, 96%, 32%) 92%,
hsl(148deg, 96%, 16%) 100%);
}
.front {
display: block;
position: relative;
padding: 12px 30px;
border-radius: 12px;
font-size: 1.25rem;
font-weight: 600;
color: white;
background: hsl(148deg, 96%, 28%);
will-change: transform;
transform: translateY(-6px);
transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
.pushable:hover {
filter: brightness(110%);
}
.pushable:hover .front1 {
transform: translateY(-8px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.pushable:active .front1 {
transform: translateY(-2px);
transition: transform 34ms;
}
.pushable:hover .shadow1 {
transform: translateY(4px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.pushable:active .shadow1 {
transform: translateY(1px);
transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
outline: none;
}
</style>
Thank you.