スクロールしていたページに、ひとつだけ揺れているボタンがある。止まらずに、でもうるさくもなく、ちょうどいいリズムで動き続けている。気づいたら目が行っていた——そういう体験を作れるのが、シェイク系のCSSエフェクトです。
エラーが出たときに入力欄が横に揺れる。CTAボタンがほんの少しバウンスして注意を引く。フォームの送信ボタンが高速で震えて「押せ」と訴えてくる。@keyframes で translateX や rotate、scale を細かく往復させるだけで、動きに個性が生まれます。この記事では、CSSだけで作れるシェイク系ボタンを5パターン紹介します。JavaScriptは一切使わず、コピペで使えるコードと調整ポイントをまとめています。
Classic Shake（クラシック・シェイク）
横揺れの基本形です。ホバーしたときに translateX で左右に振れるアニメーションが走ります。振れ幅が段階的に収束していく設計なので、「揺れて落ち着く」という自然なおさまり方になります。エラーや警告を伝えるボタン、「もう一度試してください」系のフィードバックに使うと、視覚的なメッセージが伝わりやすくなります。
赤系の背景色で作っていますが、それ自体がすでに「警告」の文脈を補強しています。フォームバリデーションで失敗したときにクラスを付与してこのアニメーションを走らせる、という実装パターンは2025年の現場でもよく見かけます。動きのシンプルさに対して印象が強く残るのが、このパターンの強みです。
See the Pen Classic Shake by BaseKENT (@basekent) on CodePen.
調整方法
- 振れ幅:
translateX(-5px)/translateX(5px)の数値を大きくするほど激しく揺れます。±8px以上にするとかなり強い印象になります - 速度:
animation: classicShake 0.5s easeの0.5sを短くするほどパチンと素早く揺れます - 色: 警告用途なら
#ef4444（赤）、注目系なら#f59e0b（アンバー）が定番です
Bounce CTA（バウンス・CTA）
ページを開いた状態でCTAボタンが軽くバウンスし続けるパターンです。animation: infinite でループさせながら、ホバー時は animation-play-state: paused で止まります。「押してください」という意図を静的なデザインではなく、動きで表現できます。
バウンスのリズムは「跳ねる→少し跳ねる→跳ねる」という不均一なパターンで設計しています。一定間隔で繰り返すより自然なリズムに見えるため、見ていて飽きにくい。ファーストビューのCTAや記事末尾の誘導ボタンに組み込むと、スクロールの途中で自然に目が止まります。ループアニメーションはやりすぎると鬱陶しくなるので、動きは控えめが正解です。
See the Pen Bounce CTA by BaseKENT (@basekent) on CodePen.
調整方法
- バウンスの高さ:
translateY(-12px)の数値を変えると跳ね上がる高さが変わります。-6pxで軽く、-20pxで大きく弾む印象になります - ループ間隔:
2sを長くすると「たまに動く」控えめな演出になります。3s〜4sあたりが目立ちすぎない目安です - 停止タイミング: ホバーで止まる仕様ですが、クリック後に止めたい場合はJavaScriptで
animation-play-state: pausedを制御する必要があります
Wobble Tilt（ウォブル・チルト）
回転で揺れるパターンです。rotate を左右交互に適用することで、倒れかけて戻る、倒れかけて戻る——という「ゆらゆら」した動きが生まれます。translateX の横揺れとは違い、ボタンが「傾く」感覚があるので、キャラクターが首を振るようなゆるさが出ます。
ゲームUI・子ども向けサービス・ポップなブランドのサイトとの相性が良いパターンです。真面目なビジネスサイトには向きませんが、個性を出したいクリエイターのポートフォリオや、エンタメ系のLPでは「これ使いたい」と思ってもらいやすい。transform-origin: center center の指定で、ボタンの中心を軸に傾く動きになっています。
See the Pen Wobble Tilt by BaseKENT (@basekent) on CodePen.
調整方法
- 傾き角度:
rotate(-6deg)/rotate(5deg)の数値を大きくするほど大きく傾きます。±10deg以上にするとコミカルになります - 速度:
0.6sを0.4sに短くするとテキパキした揺れに、0.9sにするとゆったり揺れます - 変形の起点:
transform-originをbottom centerにすると、ボタンの下端を軸に傾く動きになります
Jello Squeeze（ジェロー・スクイーズ）
scaleX と scaleY を交互に変化させることで、ゼリーのようにつぶれ・伸びる弾性感を演出するパターンです。横に押しつぶされる→縦に伸びる→少しずつ収束する、という動きはアニメーション映画でよく使われる「スクワッシュ＆ストレッチ」の表現で、生き物のような柔らかさを感じさせます。
他の4パターンが「揺れる」動きに対して、このパターンだけ「変形する」動きです。ボタン自体の輪郭が変わるので、見た瞬間に「えっ、溶けた？」という印象を残します。インパクトを重視したいプロモーションページや、インタラクティブなUXを作りたいポートフォリオに向いています。
See the Pen Jello Squeeze by BaseKENT (@basekent) on CodePen.
調整方法
- 変形の強さ:
scaleX(1.25)/scaleY(0.75)の比率を大きくするほど激しくつぶれます。1.4 / 0.6程度にするとかなり大袈裟な変形になります - 速度:
0.6sを0.4sにするとスナップ感が増します - 角丸の維持:
border-radiusが元のまま保たれるので、丸みのある形を維持したまま変形します
Vibrate Fast（バイブレート・ファスト）
高速・微振動で震えるパターンです。±2px という小さい振れ幅を 0.3s という短時間で繰り返すことで、スマートフォンのバイブレーションを連想させる感覚が生まれます。大きく揺れないのに「何か起きている」という緊張感が出るのが特徴で、Classic Shakeとは異なる緊迫感があります。
ダークなカラースキームで作っていて、ホバー時に border-color が白に変わる仕様です。「押すと何かが起動する」「これ以上進むな」といったUI文脈で使うと演出として機能します。ゲームや映画的な世界観を持つサイト、コマンド入力っぽいUIを作りたい開発者向けのポートフォリオに向いています。
See the Pen Vibrate Fast by BaseKENT (@basekent) on CodePen.
調整方法
- 振れ幅:
translateX(±2px)を±1pxにするとより繊細に、±3pxにすると少し大振りになります - 速度:
0.3s linearを0.2sに縮めると、より機械的で激しい振動感になります - カラー: ダーク背景のまま
border-colorだけを変えるとアクセントの色でテーマを作り替えられます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
