CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
Post on:2023年5月15日
sponsors
ぱっと見は普通の角丸ボタン、CSSグラーデションで実装された美しい光がきらりとボーダーに沿って回転するボタンを実装したデモを紹介します。
小さなボタンですが、CSSコンテナクエリをはじめ、CSSによるマスク、hsl()の美しいグラデーション、繊細なbox-shadowとCSSのさまざまなテクニックが駆使されています。
このきらめきを伴ったボタンは、グラデーションを回転させながら要素を左右に移動させて実装されています。この動きに必要なのがボタンのサイズで、このサイズにCSSのコンテナクエリが使用されています。
|
1 2 3 4 5 6 7 8 |
button{ container-type: size; } @keyframes slide { to { transform: translate(calc(100cqw - 100%), 0); } } |
CSSコンテナクエリについて詳しくは、下記をご覧ください。
実装の仕組みをもうすこし詳しく見てみましょう。
まずは、素のボタン。
素のボタン
ボタンのHTMLは、button要素にspanできらめきが実装されています。
|
1 2 3 4 5 6 7 8 9 |
<button> <span class="spark__container"> <span class="spark"></span> </span> <span class="backdrop"></span> <span class="text"> Shim Shimmer </span> </button> |
.sparkのspan要素できらめきを作成し、ボタンに沿ってアニメーションさせます。
span要素できらめきを作成
あとは、形状にあわせてマスクします。
ボタンの形状にマスク
.sparkのCSSは、下記の通り。
|
1 2 3 4 5 6 7 8 9 |
.spark { position: absolute; inset: 0; border-radius: 100px; rotate: 0deg; overflow: hidden; mask: linear-gradient(white, transparent 50%); animation: flip calc(var(--spark) * 2) infinite steps(2, end); } |
実際の動作は、デモページをご覧ください。
See the Pen
Button Shimmer Tricks ✨ by Jhey (@jh3y)
on CodePen.
上部のプルダウンできらめきを変更できます。
元ネタは下記ツイートから。
CSS Tip ✨
Button shimmers are a cool use case for container queries 🤓
Shift an element side to side whilst spinning a gradient
Don't know the size? Use a query ⚡️
button{container-type: size;}
@ keyframes slide {to{
translate: calc(100cqw-100%) 0;
}}@CodePen link below 👇 pic.twitter.com/OUBqtRpO9D— jhey 🔨🐻✨ (@jh3yy) May 10, 2023
sponsors
