Button gradient Border Styling Css
Thu Jan 16 2025 07:26:34 GMT+0000 (Coordinated Universal Time)
Saved by
@Huzaifa
.btn-animation a {
margin: 0 auto;
width: fit-content !important;
height: 50px !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.btngradienthov a:hover {
color: #fff;
background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
}
.btn-animation a {
position: relative;
}
.btn-animation a span.elementor-button-text {
position: relative;
z-index: 9999;
}
.btn-animation a:hover:before {
background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
}
.btn-animation a:before {
content: "";
position: absolute;
width: 97%;
height: 40px;
z-index: 1;
background: #ffffff;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.btn-animation a:after {
content: "";
width: 100%;
height: 420px;
position: absolute;
border-radius: 50px;
background: conic-gradient(#d9d9d9 0%12.5%,
#d9d9d9 12.5%25%,
#62c554 25%37.5%,
#62c554 37.5%50%,
#62c554 50%62.5%,
#62c554 62.5%75%,
#62c554 75%87.5%,
#62c554 87.5%100%);
animation: border-animation 5s linear infinite;
-webkit-animation: border-animation 5s linear infinite;
}
@keyframes border-animation {
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
content_copyCOPY
Comments