マウスオーバーでラインが動くようなアニメーションのボタンを実装出来るコード

Button outline animation on hover

DEMO 表示

SVGを使わずにCSSだけで、こちらのアニメーションは実装されています。

CSSのpaddingでボタンの大きさも調整することが簡単に出来て、大きさが変わっても問題なくアニメーションするようになっており、とても使い勝手の良いコードとなっています

またCSSアニメーションで実装しているので、アニメーションが効かないブラウザには普通のボタンとし機能するのも良い

HTML

<div class='btn-cont'>
 <a class='btn' href='#'>
 Learn More
 <span class='line-1'></span>
 <span class='line-2'></span>
 <span class='line-3'></span>
 <span class='line-4'></span>
 </a>
</div>

SCSS

body {
 height: 100%;
 width: 100%;
 background-color: black;
}

.btn-cont {
 text-align: center;
 margin-top: 200px;
 
 .btn {
 position: relative;
 padding: 20px 70px;
 border: 1px solid white;
 color: white;
 text-decoration: none;
 font-size: em(18px);
 font-family: 'Open Sans', sans-serif;
 text-transform: uppercase;
 letter-spacing: 2px;
 -webkit-font-smoothing: antialiased;
 
 &:hover {
 border: none;
 
 .line-1 {
 animation: move1 1500ms infinite ease;
 }
 
 .line-2 {
 animation: move2 1500ms infinite ease;
 }
 
 .line-3 {
 animation: move3 1500ms infinite ease;
 }
 
 .line-4 {
 animation: move4 1500ms infinite ease;
 }
 }
 }
 
 .line-1 {
 content: "";
 display: block;
 position: absolute;
 width: 1px;
 background-color: white;
 left: 0;
 bottom: 0;
 }
 .line-2 {
 content: "";
 display: block;
 position: absolute;
 height: 1px;
 background-color: white;
 left: 0;
 top: 0;
 }
 .line-3 {
 content: "";
 display: block;
 position: absolute;
 width: 1px;
 background-color: white;
 right: 0;
 top: 0;
 }
 .line-4 {
 content: "";
 display: block;
 position: absolute;
 height: 1px;
 background-color: white;
 right: 0;
 bottom: 0;
 }
}

@keyframes move1 {
 0% {
 height: 100%; 
 bottom: 0;
 }
 54% {
 height: 0; 
 bottom: 100%;
 }
 55% {
 height: 0; 
 bottom: 0;
 }
 100% {
 height: 100%; 
 bottom: 0;
 }
}

@keyframes move2 {
 0% {
 width: 0;
 left: 0;
 }
 50% {
 width: 100%; 
 left: 0;
 }
 100% {
 width: 0; 
 left: 100%;
 }
}

@keyframes move3 {
 0% {
 height: 100%; 
 top: 0;
 }
 54% {
 height: 0; 
 top: 100%;
 }
 55% {
 height: 0; 
 top: 0;
 }
 100% {
 height: 100%; 
 top: 0;
 }
}

@keyframes move4 {
 0% {
 width: 0; 
 right: 0;
 }
 55% {
 width: 100%; 
 right: 0;
 }
 100% {
 width: 0; 
 right: 100%;
 }
}