ボタン全体がひとかたまりで動くのではなく、テキストの1文字ずつが独立してめくれていく——そういうアニメーションは、見た人の視線をしっかり引き止めます。rotateXやrotateYを文字単位で制御し、animation-delayをずらして連鎖させる「レター・フリップ」は、波のような流れ、外側への広がり、カードをめくるような横回転など、実装の組み合わせ次第で表情が大きく変わります。
今回は5種類のレター・フリップ系ボタンを紹介します。核となるperspectiveによる3D空間の設定、transform-originの方向指定、nth-childを使ったスタガーdelayを中心に、左→右の波型・逆流型・中央バースト型・フェードイン複合型・Y軸フリップ型のバリエーションを揃えました。JavaScriptなしのCSSのみ実装です。なお各デモはHTMLで<span>タグを1文字ずつ手書きする前提のため、ボタンテキストを変更する際はHTMLとnth-childのdelayも合わせて修正してください。
Wave Flip（ウェーブ・フリップ）
左から右へ、1文字ずつ順番にめくれるもっとも基本的なレター・フリップです。各<span>にnth-childごとに0.06sずつ遅延をずらすことで、文字が折り紙のようにパタパタと起き上がる波のような動きを作っています。perspective: 400pxを親の.btnに設定し、transform-origin: top centerで「紙の上辺を軸に手前に倒れた状態から起き上がる」見え方になります。
ダーク背景に白文字という落ち着いた組み合わせで、どんなサイトにも馴染みやすい汎用設計。テキストの視認性を保ちながら動きを加えたいポートフォリオやコーポレートサイトのCTAボタンに向いています。
See the Pen Wave Flip by BaseKENT (@basekent) on CodePen.
調整方法
- 文字数と遅延: 各
nth-childのanimation-delayを0.06s刻みで設定しています。ボタンテキストの文字数に合わせてnth-childを増やし、最後の文字まで遅延を追加してください - フリップ速度:
wave-flip 0.4sの秒数を短くすると機敏に、長くするとゆっくり起き上がります - カラー:
background: #1e293b（ダークスレート）をブランドカラーに変更してください
Reverse Wave（リバース・ウェーブ）
右端から左へ、末尾の文字から波が始まるリバース演出です。Wave Flipとまったく同じ@keyframesを使いながら、nth-childの遅延順序を逆にするだけで、まるで別のアニメーションのように見えます。ホバーと同時にカラーがcolor: #818cf8（インディゴ系）に切り替わる演出も加えており、動きと色変化が同時に起きることで視覚的なインパクトが増します。
右から左という流れは、日本語やアラビア語のような右読み文化圏のユーザーに対する配慮としても使えます。ドロップダウンの最後の項目や、「←Back」のような戻るボタンとも相性がよいです。
See the Pen Reverse Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 遅延の逆順:
nth-child(1)を最大値（6文字なら0.30s）から始め、末尾のnth-child(6)を0.00sにすることで逆流効果になります - ホバー時のカラー変化:
color: #818cf8をお好みの強調色に変更してください。ホバー全体に適用するため.btn:hover .letterにまとめて書けます - ボーダースタイル:
border: 2px solid #e2e8f0の幅と色を調整してください
Center Burst（センター・バースト）
中央の文字から両外側へと広がっていく、バースト（炸裂）型のフリップです。6文字の場合、3・4文字目（中央2文字）をdelay: 0sで最初に起き上がらせ、2・5文字目を0.08s、1・6文字目を0.16sで後追いさせることで、中心から外側へ爆発が広がるように見えます。
Wave Flipとは異なり「どこを起点に動くか」という情報設計が明確で、中央が強調されます。「SUBMIT」「LAUNCH」などの短いアクションワードに使うと、ボタンの意味とアニメーションの「中心から広がる」構造が一致して、視覚的なメッセージが強くなります。
See the Pen Center Burst by BaseKENT (@basekent) on CodePen.
調整方法
- 中央文字の定義: 文字数が奇数の場合（例: 5文字）は中央1文字を
nth-child(3)として0sに設定し、左右1つずつを0.08s、端2文字を0.16sで設定してください - バーストの速さ: 各グループの
animation-delay間隔（現在0.08s）を狭めると素早い爆発感に、広げるとゆったりした広がりになります - カラー:
background: #7c3aed（バイオレット系）をお好みの色に変更してください
Stagger Fade（スタガー・フェード）
rotateXとopacityを同時にアニメーションさせる、めくれながらフェードインする柔らかいバリエーションです。from { transform: rotateX(90deg); opacity: 0; }からto { transform: rotateX(0deg); opacity: 1; }へ変化するため、文字が「半透明の状態で倒れた位置から、起き上がりながら見えてくる」という二重の変化が生まれます。
Wave Flipよりも動きが繊細で、コーポレートやサービス系のサイトなど、アニメーションに品を求めるデザインに向いています。ディレイ間隔を0.07sにしてやや長めにとることで、各文字の動きをじっくり感じられるテンポになっています。
See the Pen Stagger Fade by BaseKENT (@basekent) on CodePen.
調整方法
- フェードの深さ:
fromにopacity: 0を設定しています。opacity: 0.3など中間値にすると、消え方が浅くなりより動きが控えめになります - ディレイ間隔:
0.07s刻みのstaggerを0.04sにするとテンポよく、0.10sにするとゆっくりした波になります - カラー:
background: #ea580c（オレンジ系）をブランドカラーに変更してください
Y-Axis Flip（Y軸フリップ）
X軸（天地）ではなくY軸（左右）を回転軸にした横方向のフリップです。transform-origin: left centerで文字の左辺を軸にしてrotateY(90deg)から起き上がらせることで、カードを横にめくるような動きになります。文字が「奥から手前に飛び出してくる」感覚があり、Wave Flipとは明確に異なる立体感を持っています。
グリーン系のカラーで整えており、スタート・確認・完了など「前進する」アクションを示すボタンと相性がよいです。ゲーム系のUIや、ステップが進む感覚を演出したい入力フォームの次へボタンなどにも使いやすい動きです。
See the Pen Y-Axis Flip by BaseKENT (@basekent) on CodePen.
調整方法
- 回転軸の向き:
transform-origin: left centerをright centerに変えると右辺を軸に反対方向にめくれます。center centerにするとパタンと倒れる感じになります - フリップ方向:
rotateY(90deg)をrotateY(-90deg)にすると裏側から飛び出てくる向きに反転します - カラー:
background: #16a34a（グリーン系）をお好みのブランドカラーに変更してください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
