Border Gradient Button CSS
selector .elementor-button{
position: relative;
overflow: hidden;
z-index: 1;
margin-bottom: -15px
}
selector .elementor-button:before{
content: '';
position: absolute;
left: -2px;
top: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(90deg, rgba(255,74,66,1) 0%, rgba(7,20,221,1) 100%);
border-radius: inherit;
z-index: -1;
}
selector .elementor-button:after{
content: '';
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
left: 3px;
top: 3px;
background-color: #07080f;
border-radius: inherit;
z-index: -1;
}
Animated Border Gradient Button CSS
selector .elementor-button{
position: relative;
overflow: hidden;
z-index: 1;
margin-bottom: -15px
}
selector .elementor-button:before{
content: '';
position: absolute;
left: -20px;
top: -100px;
width: calc(100% + 40px);
height: calc(100% + 200px);
background: linear-gradient(0deg, rgba(195,34,34,1) 0%, rgba(225,112,40,1) 51%, rgba(45,253,233,1) 100%);
z-index: -1;
animation: rotatebtn 3s linear infinite;
}
@keyframes rotatebtn {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
selector .elementor-button:after{
content: '';
position: absolute;
width: calc(100% - 8px);
height: calc(100% - 8px);
left: 4px;
top: 4px;
background-color: #07080f;
border-radius: inherit;
z-index: -1;
}
