See the Pen
枠線が周るようにキラッと光るボタン（アウトライン） by チータツ (@cheese_fuji)
on CodePen.
ボタンの枠線（外周）をぐるぐると光が周り続けるボタンのCSSです。
さりげなくボタンを強調したい時に使えます。
CSSの解説
コードを見る
余計な装飾を省いています。
<div class="btn-rot">
<a href="#">周るように光るボタン</a>
</div>
/*** ボタンブロック ***/
.btn-rot{
text-align: center;
margin: 2rem;
overflow: hidden; /*必須*/
}
/* ボタン（リンク）部分 */
.btn-rot a{
text-decoration: none; /*下線削除*/
display: inline-block;
position: relative; /*疑似要素作成用*/
padding: 0.75em 4em;
margin: 1rem;
background: white; /*ボタン色*/
color: green; /*文字色*/
font-weight: bold; /*太字*/
box-sizing: border-box;
}
/*ボタンの枠線*/
.btn-rot a:before{
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid green;
z-index: -2;
}
/*** ボタン線上の光沢 ***/
.btn-rot a:after{
content: "";
position: absolute;
top: -30px;
left: -100px;
width: 100px;
height: 30px;
background: white; /*光沢の色はページの背景色に合わせる*/
filter: blur(12px); /*ぼかし*/
animation: 3s arround-circle linear infinite; /*枠線場を周るアニメーション*/
z-index: -1;
}
/*** 線上を回るアニメーション ***/
@keyframes arround-circle{
/**************
0%~40%：左上から右上
40%~50%：右上から右下
50%~90%：右下から左下
90%~100%：左下から左上
**************/
0%{
top: -30px;
left: -100px;
}
40%{
top: -30px;
left: 100%;/*右まで移動*/
}
50%{
top: 100%; /*下まで移動*/
left: 100%;
}
90%{
top: 100%;
left: -100px; /*左まで移動*/
}
100%{
top: -30px; /*元の位置*/
left: -100px;
}
}
ボタン自体は普通の長方形で作成し、疑似要素::beforeで枠線を描画、疑似要素::afterで光沢（光）を作成して外周をぐるぐる回らせます。
なお、光沢を自然なものにするため、光沢にfilter: blur()でぼかしを入れます。その上でボタンの中・文字に光がかからないようにz-indexで疑似要素（枠線・ボタン）は、ボタン本体より背面に配置しています。
また、光沢はボタンの外周を回るため、光沢の色はページの背景色に合わせます。
- ボタンのブロック枠を作成 .btn-rot
- 光沢の大きさ次第でははみ出るため、overflow: hiddenで範囲外にはみ出た要素を非表示にする
- ボタン本体 .btn-rot a
- text-decoration: noneでリンクの下線を削除
- display: inline-blockでインラインブロック化して、ボタンとしての余白などを設定
- 疑似要素の基点とするため、position: relativeを指定
- 背景色や文字色などを設定
- ボタンの枠線 .btn-rot a:before
- position: absoluteによる位置指定（枠線の太さ分だけ左上にずらす）
- width: 100%, height: 100%でボタン本体と同じ大きさに
- borderで枠線を作成（この枠線以外はボタン本体に重なって隠れる）
- z-index: -2でボタンより背面に配置
- 光沢を作成 .btn-rot a:after
- 長方形を作成
- background-colorはページの背景色に合わせる
- filter: blur()で適度にぼかしを入れる
- z-index: -1でボタン本体より背面、枠線より前面に配置
- @keyframesによるアニメーションで位置を左上→右上→右下→左下の順番に変更する
光沢（光）をページの背景色と合わせているため分かりづらいですが、光沢の色を赤色などにするとどのように動いているかが分かります。
応用CSS
塗りつぶしver.
内部にも色を付けたボタンです。
枠線が明るい色だと光っているのが分かりづらいため、中を明るめに枠線を暗めにするのがおすすめです。
See the Pen
枠線が周るようにキラッと光るボタン（塗りつぶし） by チータツ (@cheese_fuji)
on CodePen.
コードを見る
余計な装飾を省いています。
<div class="btn-rot">
<a href="#">周るように光るボタン</a>
</div>
/*** ボタンブロック ***/
.btn-rot{
text-align: center;
margin: 2rem;
overflow: hidden; /*必須*/
}
/* ボタン（リンク）部分 */
.btn-rot a{
text-decoration: none; /*下線削除*/
display: inline-block;
position: relative; /*疑似要素作成用*/
padding: 0.75em 4em;
margin: 1rem;
background: #D75050; /*ボタン色*/
color: white; /*文字色*/
font-weight: bold; /*太字*/
box-sizing: border-box;
}
/*ボタンの枠線*/
.btn-rot a:before{
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid #922041; /*枠線*/
z-index: -2;
}
/*** ボタン線上の光沢 ***/
.btn-rot a:after{
content: "";
position: absolute;
top: -30px;
left: -100px;
width: 100px;
height: 30px;
background: white; /*光沢の色はページの背景色*/
filter: blur(10px); /*ぼかし*/
animation: 3s arround-circle linear infinite; /*枠線場を周るアニメーション*/
z-index: -1;
}
/*** 線上を回るアニメーション ***/
@keyframes arround-circle{
/**************
0%~40%：左上から右上
40%~50%：右上から右下
50%~90%：右下から左下
90%~100%：左下から左上
**************/
0%{
top: -30px;
left: -100px;
}
40%{
top: -30px;
left: 100%;/*右まで移動*/
}
50%{
top: 100%; /*下まで移動*/
left: 100%;
}
90%{
top: 100%;
left: -100px; /*左まで移動*/
}
100%{
top: -30px; /*元の位置*/
left: -100px;
}
}
色付き背景ver.
ページ全体に色が付いている時のボタンのサンプルです。
たとえば、背景が青色の場合は、以下のような色合いがおすすめです。
See the Pen
枠線が周るようにキラッと光るボタン（青背景） by チータツ (@cheese_fuji)
on CodePen.
コードを見る
余計な装飾を省いています。
<div class="btn-rot">
<a href="#">周るように光るボタン</a>
</div>
/*** ボタンブロック ***/
.btn-rot{
text-align: center;
margin: 2rem;
overflow: hidden; /*必須*/
}
/* ボタン（リンク）部分 */
.btn-rot a{
text-decoration: none; /*下線削除*/
display: inline-block;
position: relative; /*疑似要素作成用*/
padding: 0.75em 4em;
margin: 1rem;
background: #1094F7; /*ボタン色*/
color: white; /*文字色*/
}
/*ボタンの枠線*/
.btn-rot a:before{
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid white;
z-index: -2;
}
/*** ボタン線上の光沢 ***/
.btn-rot a:after{
content: "";
position: absolute;
top: -30px;
left: -100px;
width: 100px;
height: 30px;
background: #000386; /*光沢の色はページの背景色*/
filter: blur(16px); /*ぼかし*/
animation: 3s arround-circle linear infinite; /*枠線場を周るアニメーション*/
z-index: -1;
}
/*** 線上を回るアニメーション ***/
@keyframes arround-circle{
/**************
0%~40%：左上から右上
40%~50%：右上から右下
50%~90%：右下から左下
90%~100%：左下から左上
**************/
0%{
top: -30px;
left: -100px;
}
40%{
top: -30px;
left: 100%;/*右まで移動*/
}
50%{
top: 100%; /*下まで移動*/
left: 100%;
}
90%{
top: 100%;
left: -100px; /*左まで移動*/
}
100%{
top: -30px; /*元の位置*/
left: -100px;
}
}
body{
background: #000386;
}
