<body>
    <div class="outer">
        <div class="inner">
            <a href="#">Hover me</a>
        </div>
    </div>
</body>
       body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items:center;
            background-color: black;
        }
        .outer{
width:300px;
height:50px;

border-radius:10px;
padding:5px;


        }
        .outer:hover{
            animation-name:rotate;
            animation-iteration-count:infinite;
            animation-duration:1s;
            animation-delay: 0ms;
            background-color: rgb(23, 248, 248);
           
        }
        .outer:hover a{
            color:aqua;
         
        }
@keyframes rotate {
    from{
       
        filter: hue-rotate(0deg);
    }
    to{
        filter:hue-rotate(360deg);
    }
}
        .inner{
            width:100%;
            height:100%;
            display:flex;
            justify-content: center;
            align-items:center;
            background-color: black;
            border-radius:10px;
           
        }
        a{
            color:white;
            text-decoration:none;
            font-weight: 900;
            font-size:25px;
        
        }
        

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.