In this topic,
We are going to see how to create dotted border animation on hover.
Step-1: Create Html Code in the index.html file.
<body> <div class="outline-path"></div> </body>
Step-2: Add CSS Code in the <style>…</style> on index.html file.
html, body { width: 100%; height: 100%; display: flex; } div { position: relative; width: 140px; height: 64px; margin: auto; } .outline-path { outline: 1px solid #333; outline-offset: -1px; transition: all 0.3s linear; cursor: pointer; } .outline-path:hover { outline: 1px solid transparent; background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 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; animation: linearGradientMove 0.3s infinite linear; } @keyframes linearGradientMove { 100% { background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px; } }
Review the below video.
I hope you guys found something useful.