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

Button outline animation on hover
このエントリーをはてなブックマークに追加
PR

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%;
 }
}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)