.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); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter