DEMO
CODE
<div class="demo-stage"><button class="lq-btn">HOVER ME</button></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.lq-btn { position:relative; overflow:hidden; padding:1.1rem 3rem; background:transparent; border:2px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:1rem; cursor:pointer; border-radius:99px; z-index:1; transition:color .4s ease; }
.lq-btn::before { content:""; position:absolute; left:0; bottom:0; width:100%; height:0%; background:#E91B89; z-index:-1; transition:height .45s cubic-bezier(.4,0,.2,1), border-radius .45s ease; border-radius:50% 50% 0 0; }
.lq-btn:hover { color:#fff; }
.lq-btn:hover::before { height:220%; border-radius:0; }
AI PROMPT
液体が満ちるボタンをCSSのみで作って。透明背景＋ピンクのborder、::before疑似要素をheight:0%→220%へ.45s cubic-bezierで拡大。初期はborder-radius:50% 50% 0 0で液体の丸み、ホバーで0にして満タン表現。テキスト色はホバーで白へ.4s遷移。z-indexで::beforeを背面に。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ホバー時に液体が下から満ちるように色がせり上がるボタン効果。CSSのみで動く軽量なCTA演出。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。