<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.