<button class="btn">CLICK ME</button>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
display: grid;
place-content: center;
}
.btn {
padding: 6px;
font-size: 1.4em;
position: relative;
border: none;
background: transparent;
border-radius: 4px;
box-sizing: border-box;
width: 200px;
height: 100px;
overflow: hidden;
}
.btn:before {
content: "";
position: absolute;
z-index: -2;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
display: block;
background-color: #1a232a;
background-image: conic-gradient(from -0.25turn, transparent, rgba(168, 239, 255, 1), transparent 50%);
}
.btn::after {
content: "";
position: absolute;
z-index: -1;
display: block;
top: 6px;
left: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: #fff;
}
.btn:hover::before {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.