ボタンが「消え方」によって、こんなに印象が変わるとは思っていませんでした。letter-spacing でテキストを霧散させる。filter: blur() で滲ませる。opacity と組み合わせることで、文字が空気に溶けていくような演出が、JavaScriptなしのCSSだけで実現できます。「ディゾルブ」とは映像編集用語で、場面が溶けるように次の場面へ移行する手法のことです。この感覚をボタンに持ち込むと、単なる色変えホバーとはまったく異なる、詩的で上品な動きが生まれます。エレガント系・ブランド系・ポートフォリオのCTAに特に向いています。
全5デモ、JavaScriptなし、CSSのみで実装しています。::before / ::after の疑似要素と data-text 属性を組み合わせたテキスト入れ替えから、ページロード時の入場演出、デフォルト状態に霞みを持たせる「常時ディゾルブ」まで、バリエーションをばらけさせています。WordPress / SWELLへのコピペもそのまま使えます。
Blur Dissolve（ブラー・ディゾルブ）
ページを開いた瞬間、ボタンが霞の中から凝集して現れます。filter: blur() + opacity + letter-spacing の3プロパティを同時にアニメーションする入場演出です。@keyframes の開始時点で blur(14px)・opacity: 0・letter-spacing: 0.38em（散らばった霞の状態）を定義し、終点で blur(0px)・opacity: 1・letter-spacing: 0.06em（凝集した実体）へ変化させます。cubic-bezier(0.2, 0, 0.2, 1) のイージングによって、最初はゆっくり凝集し始めて最後にキリッと実体化する動きになります。ヒーローセクションの最初のCTAや、スクロールイン演出と組み合わせると映像的なまとまりが出ます。
See the Pen Blur Dissolve by BaseKENT (@basekent) on CodePen.
調整方法
- ぼかし量:
blur(14px)の数値を大きくするほど出発点の霞が深くなります。24px以上にするとかなり幻想的な入場に、6px程度にするとさりげない動きになります - 速度:
animation: blur-dissolve-in 1sの秒数を変えると入場速度が変わります。1.5s以上でゆっくり凝固する幻想的な演出に、0.6sでシャープな入場になります - 背景色:
background: #1a1a2eをサイトの背景色に合わせてください。暗い背景のほうが霞の効果が際立ちますが、白背景でも使えます
Scatter Hover（スキャター・ホバー）
ホバーすると元のテキストが左右に散らばって消え、新しいテキストが中心から収束して現れます。元テキストには letter-spacing のトランジション（0.06em → 0.6em）と color: transparent を適用して霧散を表現し、::after 擬似要素に content: attr(data-text) で別テキストを持たせて letter-spacing: 0.6em → 0.06em の逆方向トランジションで収束させています。cubic-bezier(0.4, 0, 0.2, 1) のイージングが、テキストの「吸い込まれる」感覚を強調します。ホバーとアンホバーで双方向に散らばり／収束する対称的な演出なので、何度繰り返しても美しい動きが続きます。
See the Pen Scatter Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 散らばり幅:
letter-spacing: 0.6emの値を大きくするほど文字が派手に霧散します。1em以上にすると激しい散乱に、0.3emにするとさりげない動きになります - 速度:
transition: letter-spacing 0.45sの秒数を長くするとゆっくり溶けていく演出になります。0.7s以上でスロー溶解感が増します - ボーダー色:
border: 2px solid #06b6d4の色をブランドカラーに変えてください。::afterのcolorも同じ色に揃えることを忘れずに
Melt Down（メルト・ダウン）
ホバーすると元のテキストが溶けるように消え、新しいテキストが下から滲みながら浮かび上がります。::before 擬似要素を translateY(110%)・filter: blur(4px)・opacity: 0（ボタン外・霧中）の初期状態に置いておき、ホバーで translateY(0)・blur(0px)・opacity: 1 へ遷移させます。overflow: hidden でボタン外にはみ出た ::before を非表示にしているため、テキストがボタンの底から実体化しながら浮き上がる動きに見えます。元テキストは color: transparent でフェードするだけですが、視覚的には「溶けた旧テキストが下へ消え、新テキストが凝集して浮上した」という一連のストーリーとして読めます。オレンジ〜レッドのグラデーション背景が「熱で溶ける」イメージを強化しています。
See the Pen Melt Down by BaseKENT (@basekent) on CodePen.
調整方法
- 浮き上がりの速度:
transition: transform 0.45s easeの秒数を変えると浮上スピードが変わります。0.3sで素早い出現に、0.7s以上で液体がゆっくり凝固するような重さが出ます - ぼかしの強さ:
::beforeの初期filter: blur(4px)を大きくすると、テキストがより深い霞の中から実体化するような演出になります - 起点の位置:
translateY(110%)をtranslateY(60%)に変えると、ボタン内側の下半分から短い距離を浮き上がる演出になります
Evaporate（エバポレート）
ホバーすると ::before のテキストが scale(1.45)・filter: blur(10px) で膨張しながら霧散し、同時に ::after のテキストが scale(1.45 → 1) で収縮しながら凝集して現れます。::before と ::after の両方に content: attr(data-text) で同じテキストを配置し、実際の <a> タグのテキストは font-size: 0 で非表示にしています。これにより、2つの疑似要素それぞれに独立した transform: scale() と filter: blur() のアニメーションを適用できます。蒸発と凝縮が同時進行するため、物質が相変化するような独特の立体感があります。同じ単語が一瞬「蒸気」になり、また「実体」として戻ってくる、そういう見え方です。
See the Pen Evaporate by BaseKENT (@basekent) on CodePen.
調整方法
- 膨張量:
scale(1.45)を大きくするほど蒸発感が強くなります。1.8にするとより蒸気的な広がりに、1.2にするとさりげない変化になります - ぼかし量:
filter: blur(10px)の数値を大きくすると蒸発状態がよりフワッとした霧になります。6px程度にするとシャープな蒸発感に変わります - ピル型:
border-radius: 50pxを8pxに変えると角丸ボタンになります。ボタン形状を変えてもアニメーションはそのまま動きます
Condense In（コンデンス・イン）
デフォルト状態でボタンが「霞がかかったような」見た目をしており、ホバーすると実体化します。.btn に filter: blur(1.5px)・opacity: 0.6・letter-spacing: 0.22em を設定することで、未ホバー時はやや幻影のような存在感を持ちます。ホバーで blur(0px)・opacity: 1・letter-spacing: 0.06em に変化し、テキストがキリッとした実体に凝集します。box-shadow も同時に強化されることで、影が「存在感の重さ」として加わります。他の4本がホバー時に変化を起こすのに対し、これだけは「常時ディゾルブ状態がデフォルト」という設計です。ダークテーマのランディングページや、ポップアップ系UIのCTAに向いています。
See the Pen Condense In by BaseKENT (@basekent) on CodePen.
調整方法
- 霞の深さ:
filter: blur(1.5px)の値を大きくするほどデフォルト状態が幻想的になります。3px以上にすると読みにくくなるため、コントラスト比に注意してください - 存在感の薄さ:
opacity: 0.6を下げると（0.4など）よりゴースト的な印象になります。アクセシビリティの観点から0.4以下は避けるほうが安全です - 文字間隔: デフォルトの
letter-spacing: 0.22emを大きくすると霞みが強調されます。0.4emまで広げると、かなりふわっとした存在感になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
