<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>singhbir</title> </head> <style> body{ background-color: #4e504a ; } h2{ text-align: center; margin: 0 auto; margin-top: 300px; color: white; } a{ font-size: 2em; border: 2px solid black; border-radius:30px; background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); background-size: 200%; color: black; text-decoration: none; } a:hover{ animation: helo 1.5s linear infinite; } @keyframes helo{ 0%{ background-position: 0% ; } 100%{ background-position: 200%; } } </style> <body> <div> <h2> <a href="https://www.github.com/singhbir">Connect with Singh_bir</a><br> hover on above button </h2> </div> </body> </html>