ボタンが「割れる」という動きは、それだけで目を引く。上下に、左右に、あるいは斜めに分断されるパネルが、ホバーした瞬間にスライドして消えていく。そこに現れるのは背景色であったり、テキストであったり、思いもよらない演出だったりする。スプリットエフェクトは、「押してみたい」という好奇心をシンプルな構造で引き出せる手法です。
この記事では、CSSの疑似要素（::before / ::after）だけで作るスプリットボタン5種を紹介します。JavaScriptは一切使わず、HTMLも <a> タグ一行。コピペでそのまま使えます。WordPressやSWELLにもそのまま貼り付けられます。
Vertical Split（垂直分割）
上半分と下半分、2枚のパネルがホバーで上下に飛んでいく、ストレートなスプリットエフェクトです。::before が上に、::after が下に退場し、テキストだけが残る。説明するよりも見てもらった方が早い動きで、コーポレートサイトのCTAボタンや、ポートフォリオの「WORKS」ボタンなど、存在感が欲しい一点に置くと映えます。
疑似要素は z-index: -1 でテキストの下に配置しているため、ホバー前後どちらでもテキストは常に見えています。背景を transparent にした a タグの上に、2枚の暗いパネルが重なっているイメージです。
See the Pen Vertical Split by BaseKENT (@basekent) on CodePen.
調整方法
- パネル色:
background: #1a1a1aを変更するとボタンカラーが変わります。白背景ページなら#333333や#2c2c2cあたりが馴染みやすいです - アニメーション速度:
transition: transform 0.4sの数値を0.2sにすると鋭いスナップ感に、0.6sにするとゆっくり流れるように - パディング:
padding: 16px 44pxの横値を広げると、よりワイドなボタンになります
Horizontal Split（水平分割）
今度は左右に分かれます。左パネルが画面左へ、右パネルが画面右へ走り去る。Vertical Splitと基本構造は同じですが、左右分割は「スライドドアが開く」感覚に近く、インタラクティブな印象が強まります。
横方向の動きはスクロールの流れと垂直方向に交差するため、縦スクロールが多いページの中で特に目立ちます。ナビゲーション内のボタンや、ランディングページのキービジュアル下に置くCTAとして相性が良いです。
See the Pen Horizontal Split by BaseKENT (@basekent) on CodePen.
調整方法
- パネル色: Vertical Splitと同様に
backgroundで変更。左右で色を変えたい場合はa::beforeとa::afterにそれぞれ異なる色を指定できます - イージング:
cubic-bezier(0.4, 0, 0.2, 1)をease-outに変えると、よりシンプルな滑らかさになります - 角丸:
aタグにborder-radius: 4pxなどを追加すると、パネルごと丸くなります（overflow: hiddenとの組み合わせで自然に切れます）
Reveal Inner（リビール・インナー）
「割れる」ことで、隠れていたものが現れる。Reveal Innerはそういう演出です。ホバー前は暗いパネルがボタン全体を覆っており、ホバーすると上下に分かれてアクセントカラーとテキストが「解放」されます。
仕組みとしては、a タグ自身に鮮やかな背景色（ここでは赤）を持たせ、その上に黒いパネル2枚を被せています。z-index を設定しない疑似要素はテキストより上に積まれるため、ホバー前はテキストが color: transparent で隠れており、パネルが退くタイミングで color: #fff に変わります。「封印が解ける」ような緊張感がある一本。
See the Pen Reveal Inner by BaseKENT (@basekent) on CodePen.
調整方法
- 背景色（アクセントカラー）:
aのbackground: #e74c3cがホバー後に現れる色です。ブランドカラーに変えるとサイトに馴染みます - テキスト表示タイミング:
transition: color 0s 0.3sの0.3sがパネルが開き終わるのを待つ遅延です。アニメーション時間を変えた場合はここも合わせて調整してください - 角丸:
aにborder-radiusを追加してもパネルが追従します（overflow: hiddenが不要なほどスムーズです）
Shutter Open（シャッターオープン）
斜めに切られた2枚のブレードが左右に開く。写真スタジオのシャッターが開くような、少しメカニカルで劇的な演出です。clip-path: polygon() で台形にクロップしたパネルを使い、左ブレードと右ブレードが噛み合った状態からスライドして分離します。
ホバー前の状態でパネルが重なっているのに境目が「斜め線」になっているのが特徴。Reveal Innerと同じ「封印→解放」系ですが、こちらは動きの形状が独特なためよりデコラティブな印象になります。アニメーションやゲームのUIなど、少しキャラクターのある場面で使いたいデザインです。
See the Pen Shutter Open by BaseKENT (@basekent) on CodePen.
調整方法
- 斜め角度:
clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%)の57%と43%の差が斜めの角度を決めます。差を広げると急な角度に、狭めると緩やかになります - 背景色:
aのbackground: #2980b9がホバー後に現れるカラーです - スライド量:
translateX(-115%)の数値を大きくするとブレードが完全に画面外に出ます。小さすぎるとパネルが残って見えるので100%以上を推奨
Scan Split（スキャン・スプリット）
4pxだけ上下にずれる、微小なスプリットエフェクト。パネルが遠くに消えるのではなく、わずかに分離してグロウが滲む。SF映画の走査線ノイズや、モニターのスキャンラインを想起させる細かな動きです。
背景は #080c14 の深い夜空色、ボーダーとテキストは #4fc3f7 のシアン。box-shadow で光が外に漏れるようなグロウエフェクトを加えています。移動量が小さい分、トランジションは 0.25s ease で軽快に動かしています。ダークテーマのサイト、テック系・サイバー系のデザインに特によく合います。
See the Pen Scan Split by BaseKENT (@basekent) on CodePen.
調整方法
- グロウカラー:
rgba(79, 195, 247, 0.5)の79, 195, 247がシアンのRGB値です。好みの色に変えるとグロウ色も連動します - 分離幅:
translateY(-4px)の4pxを6pxや8pxに広げると分離が目立つ荒々しい印象になります - ボーダー:
border: 1px solid rgba(79, 195, 247, 0.4)の不透明度を0.8程度に上げると、静止時からはっきりしたフレームになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
