Button with 3D border and shadow
CSS
.effect-3d-button-border-shadow .elementor-widget-container {
width: fit-content;
outline-offset: 4px;
transition: filter 250ms;
border-radius: 12px;
}
.effect-3d-button-border-shadow .elementor-button-wrapper {
border-radius: inherit;
}
.effect-3d-button-border-shadow .elementor-widget-container::before,
.effect-3d-button-border-shadow .elementor-button-wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
.effect-3d-button-border-shadow .elementor-widget-container::before {
background: rgba(0,0,0,.25);
will-change: transform;
transform: translateY(6px);
transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
.effect-3d-button-border-shadow .elementor-button-wrapper::before {
background: linear-gradient(to left,
#B71C1C 0%,
#D32F2F 8%,
#D32F2F 92%,
#B71C1C 100%);
transform: translateY(4px);
}
.effect-3d-button-border-shadow .elementor-button {
border-radius: inherit !important;
background: #F44336 !important;
will-change: transform;
transform: translateY(-4px);
transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
.effect-3d-button-border-shadow:hover .elementor-widget-container {
filter: brightness(110%);
}
.effect-3d-button-border-shadow:hover .elementor-button {
transform: translateY(-6px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.effect-3d-button-border-shadow:active .elementor-button {
transform: translateY(-2px);
transition: transform 34ms;
}
.effect-3d-button-border-shadow:hover .elementor-widget-container::before {
transform: translateY(8px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.effect-3d-button-border-shadow:active .elementor-widget-container::before {
transform: translateY(1px);
transition: transform 34ms;
}
Instructions for use
If it's to be used only once, add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the widget where the CSS Class was applied. If it's to be used across multiple widgets on a single page, open "Page Settings" (gear icon) and add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the "Page Settings." If it's to be used across multiple widgets on multiple pages, open "Site Settings" (sliders icon) and add the CSS code in the "Custom CSS" field located under "Custom CSS" in the "Site Settings."
HTML
.effect-3d-button-border-shadow
Instructions for use
Add the class in the "CSS Classes" field located in the "Advanced" tab of the Button widget
Reference
Uiverse.io
cssbuttons-io
