<button class="btn">CLICK ME</button>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
:root {
--borderColor: #03A9F3;
}
body {
display: grid;
place-content: center;
}
.btn {
padding: 20px 40px;
font-size: 1.4em;
border: none;
background:
linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x,
linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x,
linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y,
linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
color: var(--borderColor);
}
.btn:hover {
animation: move 0.3s infinite linear;
box-shadow: inset 0 0 10px var(--borderColor);
}
@keyframes move {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.