CSS animation day37 となりました。
毎日記事を投稿しているせいで、画像アップロード制限(100MB月)されました。
大変申し訳ないのですが、解除されるまで、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。
これから数回にわたり、microinteraction で使えるボタンを作っていきます。
前回割と好評だった太陽の表現方法、blur + gradient color を使い、ボタンをお届けします。
1. 完成版
See the Pen Glowing Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. 参考文献
Glowing Gradient Button Animation Effects on Hover Using Html and CSS - CSS Animation Effects
3. 分解してみる
❶.
マークアップしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="button">
Button
</div>
</div>
</body>
</html>
body {
background: #fff;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.button {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
color: #000;
font-size: 24px;
}
Button
というものができました。
❷.
ボタンにグラデーションをつけましょう。
.button {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 24px;
border-radius: 30px;
background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
background-size: 400%;
}
ポイントは2つ
・background-size で大きな値を設定し、ボタンの色をgradientの3色のうちの、単色だけ表にでるように設定します。
・linear-gradientの色設定で、最初(#5433ff)と最後(#5433ff)を同じ色にしましょう。
これは、アニメーションで色が変化するときに、0% → 100% まではスムーズに変化しますが、
また100% → 0% に戻るときに全く違う色でれば、変な境界の線が一本入り、デザインを損ないます。
アニメーションの移行をスムーズにするための一工夫ですね。
❸.
ボタンにhoverしたら、色が変化するようにしましょう。
.button {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 24px;
border-radius: 30px;
background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
background-size: 400%;
&:hover {
animation: changeColor 8s linear infinite;
}
@keyframes changeColor {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
}
See the Pen Glowing Button (Explanation) by hiroya iizuka (@hiroyaiizuka) on CodePen.
background-position を、hover で変化させることで、あらかじめliear-gradientで設定していた色が全て表に出てくるようになります。面白いですね。
❹.
beforeクラスで、blur を設定し、表現力をつけましょう。
参考文献のテクニックを、もろパクリします。
.button{
position: relative; //追加
・・・
・・・
}
.button:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
border-radius: 30px;
background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
background-size: 400%;
filter: blur(20px);
}
今あるボタンに、全周的に5px 一回り大きな、擬似要素をつけます。
(このCSSの表現方法には、大変感銘を受けました。)
そして、そこに、filterをつけました。
最後に、このfilterのついた一回り大きくなった要素を、hoverで出現し、色が変化するようにしましょう。
.button {
position: relative;
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 24px;
border-radius: 30px;
background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
background-size: 400%;
&:hover {
animation: changeColor 8s linear infinite;
&:before {
opacity: 1;
animation: changeColor 8s linear infinite;
}
}
@keyframes changeColor {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
}
.button:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
border-radius: 30px;
background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
background-size: 400%;
filter: blur(20px);
opacity: 0;
transition: 0.5s;
}
See the Pen Glowing Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
完成しました！
いやはや、こういう表現方法を最初に考えた人は、天才ですね・・・。
それでは、また明日〜