はじめに
皆さんこんにちは、株式会社KANGEN Holdingsに所属するフルスタックエンジニアのA.K.です。
2023年頃から、ボーダーに沿って光がきらりと回転するボタンのUIを採用するサイトが増えていることに気づきました。特にLanding pageでその割合が高いようです。このようなボタンは英語で「shimmer button」と呼ばれます（以降も「shimmer button」と呼ばせていただきます）。
今回は、Tailwind CSSを使用してshimmer buttonを作る方法について紹介させていただきます。
1.shimmer buttonの特徴
上記は例で視覚的な魅力を感じていますか？
特徴
- ボタンの境界線や背景を輝く光が動きながら、キラキラとしたエフェクトを与えることで、視覚的にインパクトを与えます
- このエフェクトは、ユーザーの注意を引きやすく、特に重要なアクションボタンに適しています
- ユーザーエクスペリエンスを向上させるため、Shimmerエフェクトは過度にならず、洗練された印象を与えるよう設計されています
使用ケース
このパターンのボタンデザインは、モダンで未来的な見た目を持ち、ハイテク製品や先進的なサービスを提供するウェブサイトでよく使用されます。
2.技術スタック
本文では、React (Vite) + Tailwind CSSを使用しています。
Tailwind CSS公式サイトを参考にすると、フレームワークを使用するかしないかは自由です。
3.CSS関数 conic-gradient() で円錐状のグラデーションを描画
ここでは、JavaScriptを使わずに光の回転を実現するために、CSSの関数 conic-gradient() を使用します。
まず、conic-gradient() を使用してどのような表示ができるのか、以下のコードを使って確認してみます。
//index.cssファイル
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background: theme('colors.slate.950');
color: theme('colors.slate.50');
}
main {
background: conic-gradient(white, black, white);
width: 100vw;
height: 100vh;
}
//App.tsxファイル
import './App.css';
function App() {
return (
<main>
</main>
)
}
export default App;
結果はこんな感じです。まだピンとこないかもしれないですが、次にボタンを作っていきます。
4.ボタンUIの作成と conic-gradient 効果の追加
Tailwind CSSを使用して、conic-gradient をボタンの背景として追加してみます。
import './App.css';
function App() {
return (
<main className="min-h-screen flex justify-center items-center w-full">
<button
type="button"
className="px-24 py-8 text-3xl font-bold bg-[conic-gradient(from_0deg,theme(colors.slate.950)_0%,theme(colors.slate.500)_10%,theme(colors.slate.950)_20%)]"
aria-label="shimmer"
>
SHIMMER
</button>
</main>
)
}
export default App;
このグラデーションの光を動的に回転させると、どのようなイメージになるか見てみましょう。
5.CSSカスタムプロパティとアニメーションの設定
再利用性と保守性を向上させるため、カスタムプロパティを積極的に活用します。--shimmer-angle は、光の角度を制御するためのカスタムプロパティで、keyframes で0度から360度まで回転するアニメーションを追加します。
@property --shimmer-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes shimmer {
0% {
--shimmer-angle: 0deg;
}
100% {
--shimmer-angle: 360deg;
}
}
import './App.css';
function App() {
return (
<main className="min-h-screen flex justify-center items-center w-full">
<button
type="button"
className="px-24 py-8 text-3xl font-bold
bg-[conic-gradient(from_var(--shimmer-angle),theme(colors.slate.950)_0%,theme(colors.slate.500)_10%,theme(colors.slate.950)_20%)]
animate-[shimmer_2.5s_linear_infinite]"
aria-label="shimmer"
>
SHIMMER
</button>
</main>
)
}
export default App;
このように光が回転するアニメーションを追加されました。
6.Tailwind CSSでの最終仕上げ
最後に、ボタンの見た目をさらに改善していきます。
import './App.css';
function App() {
return (
<main className="min-h-screen flex justify-center items-center w-full">
<button
type="button"
className="relative px-24 py-8 text-3xl font-bold
bg-[conic-gradient(from_var(--shimmer-angle),theme(colors.slate.950)_0%,theme(colors.slate.500)_10%,theme(colors.slate.950)_20%)] animate-[shimmer_2.5s_linear_infinite] rounded-[24px]
after:flex after:absolute after:bg-slate-950 after:inset-[2px] after:rounded-[22px] after:content-[attr(aria-label)]
after:items-center after:justify-center"
aria-label="shimmer"
>
SHIMMER
</button>
</main>
)
}
export default App;
最終的な完成品はこちらです。
7.今回の記事のため用意したソースコード
今回のShimmer Buttonの作成を通して、CSSだけで動的なアニメーションを実現できるモダンな技術について学ぶことができました。conic-gradient() やカスタムプロパティの活用によって、視覚的に印象的なUIを簡単に作成できることが分かりました。
特に、JavaScriptを使わずに純粋なCSSでアニメーションをコントロールすることで、パフォーマンスの向上や保守性の向上が期待できます。Tailwind CSSと組み合わせることで、効率的にスタイルを適用し、素早くデザインを変更できる柔軟性も感じました。
これからも、こうしたモダンなCSS技術を活用して、より魅力的でインタラクティブなUIを作成していきたいと思います。皆さんもぜひ試してみて、CSSの可能性を広げてみてください。