See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
自動でキラッと光るボタン。
当サイトでも使用しているテーマAFFINGER6のボタンと、似たような仕組みになっています(たぶん)。
CSSの解説
コードを見る
HTML
<div class="button btn-shine">
<a href="#">Shine Button</a>
</div>
CSS
通常のボタン用装飾 (.button) と、ボタンを光らせる装飾 (.btn-shine) をクラス別に分けています。
既にボタンの装飾がされている場合は、15行目から下だけをコピーして使用してください。
/****** ボタン用装飾 ******/
.button{
text-align: center;
margin: 1rem;
}
/* リンク部分 */
.button a{
display: inline-block;
padding: 0.75em 4em;
background: #2e8b57; /*ボタン色*/
color: #fff;
text-decoration: none; /*下線削除*/
}
/****** ボタンをキラッとさせる ******/
.btn-shine a{
position: relative; /*疑似要素の起点*/
overflow: hidden; /*範囲外の光を隠す*/
}
/* 光 */
.btn-shine a:after{
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 10%;
height: 150%;
background: #fff; /*光の色*/
transform: rotate(45deg); /*45度傾ける*/
animation: reflect 5s ease-in-out infinite;
/*animation: アニメ名|光る周期|動き方|ループ*/
}
/*** 光のアニメーション ***/
@keyframes reflect{
0%,75%{
transform: rotate(45deg) scale(0);
opacity: 1;
}
100%{
transform: rotate(45deg) scale(100); /*大きく*/
opacity: 0;
}
}
以下、ボタンを光らせる際に必要なCSSの解説です。(ボタン作成のための装飾については省いています)
- ボタンに光らせるためのクラス (.btn-shine) を付与
- ボタン(リンク部分)に準備をする .btn-shine a
- 疑似要素を使用するためにposition: relativeを指定しておく
- 光がボタンからはみ出さないようにoverflow: hiddenを付与
- 疑似要素を使用して光を作成する (.btn-shine a:after)
- position: absoluteを使ってボタンより外に配置
- height: 150%でボタン(親要素)の高さより大きく
- background: fffで白い光に
- transform: rotate(45deg)で45度斜めにする
- animationを指定する(加速してから減速する ease-in-out とループ用の inifiniteが必須)
- 光を動かすためのアニメーションを @keyframes で作成 (reflect)
- 常に45度の傾きを維持transform: rotate(45deg)
- 時間調整のため75%までは非表示 transform: scale(0)とopacity: 0
- 100%時点でtransform: scale(100)を指定してめいっぱい大きく
(はみ出た分は親要素のoverflow: hiddenで消えるので安心)
応用CSS
ホバー時にキラッと光るボタン
マウスホバーした時に1回だけ光るボタンです。
疑似要素の表示をホバー時だけに制限し、アニメーションを1回きりの短いものに変更しています。
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.