テキストが左から一文字ずつ現れていく、あのタイプライターエフェクト。キーボードで打ち込まれているような、機械的な緊張感がCSSだけで再現できます。ターミナル風UIやテック系のポートフォリオ、コードを扱うサービスのランディングページに置くと、デザインのトーンが一気に引き締まります。
今回は5種類のタイプライター系ボタンを紹介します。実装の核となる steps() タイミング関数と border-right によるカーソル点滅を中心に、常時ループ型・ホバー発動型・ターミナルプロンプト型など用途の異なるバリエーションを揃えました。JavaScriptなしのCSSのみ実装です。
Classic Typer（クラシック・タイパー）
ページ読み込みと同時にボタンのテキストが左から打ち込まれ、末尾でカーソルが点滅し続ける最も基本的なタイプライターボタンです。overflow: hidden と width: 0 → 180px を steps(8, end) で段階的に広げることで、文字が1文字ずつ出現しているように見せています。
border-right: 3px solid をカーソルとして使い、@keyframes blink で透明↔表示を切り替えることで本物のターミナルカーソルを再現。ダーク背景とシアン系カラーを合わせると、ハッカー映画のスクリーンのような雰囲気になります。CTAというよりも「動いているデモを見せる」用途のボタンとして機能します。
See the Pen Ink Drop by BaseKENT (@basekent) on CodePen.
調整方法
- 文字数と幅:
steps(8, end)の数値（8）はボタンテキストの文字数に合わせてください。to { width: 180px }は実際の文字幅に合わせて調整を - カラー:
#38bdf8（シアン系）をブランドカラーに変更してください - アニメーション速度:
typing 2sの秒数を短くすると打ち込みが速くなります
Hover Typer（ホバー・タイパー）
ホバーするまでボタンが空白で待機し、マウスを乗せた瞬間にテキストが打ち込まれるホバー発動型です。width: 0 の <span> がホバーで 7ch（7文字幅）まで広がり、文字が出現します。animation-delay でカーソル点滅を打ち込み完了後から開始させているのが細かなポイントで、「打ち終わった」感が出ます。
ナビゲーションリンクやメニュー項目に応用すると、カーソルを乗せるたびに文字が現れる仕掛けになります。インタラクティブな驚きを仕込みたいポートフォリオサイトに向いています。
See the Pen Hover Typer by BaseKENT (@basekent) on CodePen.
調整方法
- 文字数:
max-width: 7chとsteps(7, end)のどちらも実際の文字数に合わせてください - 背景カラー:
#1e1b4b（インディゴ系）をお好みのダーク色に変更してください - 打ち込み速度:
type-in 0.6sを調整します。0.3sにすると素早い入力感になります
Delete Retype（デリート・リタイプ）
ホバーするとテキストが消えて、別のテキストが打ち込まれる「削除→再入力」型です。delete-text と retype-text の2つの @keyframes を animation-delay でつなぎ、「消える → 一拍おく → 別文字が現れる」という演出を作っています。「Send → Done!」「Submit → OK!」のようにホバー前後で意味のある変化をつけると、インタラクションとして成立します。
フォームの送信ボタンや確認ボタンに使うと、ホバーで文字が入れ替わる先取り感のある演出になります。
See the Pen Delete Retype by BaseKENT (@basekent) on CodePen.
調整方法
- 削除後の幅:
to { width: 40px }はホバー後のボタン最小幅です。空白で待機させたい場合は0にしてください - タイミング調整:
retype-text 0.5s steps(4, end) 0.5sの最後の0.5sがdelayです。削除が終わってから再入力が始まるまでの間合いを変えられます - カラー:
#16a34a（グリーン系）を変更してください
Loop Writer（ループ・ライター）
テキストが打ち込まれて、少し止まって、また消えて──を永遠に繰り返す常時ループ型です。@keyframes loop-type の中に「打つ → 静止 → 消す → 間」の4フェーズを組み込み、animation-iteration-count: infinite で無限ループさせています。ページを開いた瞬間からずっと動いているため、視線を引き寄せる効果が持続します。
ファーストビューのCTAボタンや、「今すぐ始める」系のボタンに使うと、ページのリズムが生まれます。動きが控えめなので、他のアニメーションと併用しても浮きにくいです。
See the Pen Loop Writer by BaseKENT (@basekent) on CodePen.
調整方法
- ループ速度:
loop-type 3sの秒数でループ1周のスピードを変えられます。2sにすると少しせわしなく、4sにするとゆったりした印象に - 静止時間:
@keyframesの50%〜75%の範囲が「打ち終わって止まっている時間」です。割合を広げると長く止まります - フォントカラー:
#44403cとborder-color: #78716cを合わせて変更してください
Terminal Prompt（ターミナル・プロンプト）
> というプロンプト記号付きで文字が打ち込まれる、ターミナル画面そのものの雰囲気のボタンです。::before 疑似要素で content: '> ' を先頭に固定し、そこからコマンドが入力されるように幅アニメーションで文字を展開します。背景は #18181b（ほぼ黒）、テキストは #22c55e（ターミナルグリーン）で、開発者向けサービスのデモページにそのまま置けるデザインです。
「run deploy」「git push」「npm start」のようなコマンド風テキストと組み合わせると、エンジニア向けのプロダクトLPとして非常に映えます。
See the Pen Terminal Prompt by BaseKENT (@basekent) on CodePen.
調整方法
- プロンプト記号:
::beforeのcontent: '> 'を'$ 'や'>> 'に変えると雰囲気が変わります - ターミナルカラー:
#22c55e（グリーン）を#f59e0b（アンバー）にするとレトロなCRTモニター風になります - コマンドテキスト:
steps(10, end)の数値はボタンテキスト（::before含む）の総文字数に合わせてください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
