ページを開いた瞬間に文字が打ち込まれていくボタン。それだけで、「あ、このサイトは違う」という第一印象が生まれる。タイプライター演出はテキストアニメーションとしておなじみだけれど、ボタン自体にこのエフェクトを組み込むと、クリックを誘導するCTAとしても機能する。コンソール風のターミナルUIから、ネオンの光の中に文字が打ち込まれる演出まで、タイプライター系のボタンは「情報が現れる瞬間」を見せることで読者の目を引きつける。
この記事では、CSSだけで作れるタイプライター系ボタンを5パターン紹介します。JavaScriptは一切使わず、steps() タイミング関数と overflow: hidden を組み合わせた純CSS実装です。コピペで使えるコードと、自分好みにカスタマイズするためのポイントもまとめているので、WordPressでもそのまま活用できます。
Terminal Type（ターミナル・タイプ）
黒背景に緑のモノスペースフォント。コンソール画面やターミナルを模したボタンです。ページロード時に width: 0 から animation: steps() で段階的に文字が打ち込まれ、ホバーすると背景と文字色が反転してコマンド実行のような雰囲気になります。
技術系・ガジェット系のブログや、開発者向けのポートフォリオサイトに自然になじむデザインです。「ダウンロード」「試してみる」といったCTAに使うと、サイトのブランドトーンと合わせやすい。font-family: 'Courier New', monospace のモノスペースフォントが、コンソール感を演出するポイントです。
See the Pen Terminal Type by BaseKENT (@basekent) on CodePen.
調整方法
- 文字色・枠色:
#00ff41（グリーン）を#00d4ff（シアン）や#ff9900（アンバー）に変えるとターミナルの色味が変わります - タイプ速度:
animation: terminalType 1.2s steps(6, end)の1.2sを短くするとテンポよく、長くするとじわじわとした演出に - ゴースト感:
box-shadowのrgba値を上げると発光感が増します
Neon Typewriter（ネオン・タイプライター）
ピンク系のネオンカラーで文字が打ち込まれ、text-shadow でグロー（発光）を加えたボタンです。Terminal Typeよりも装飾性が高く、エンタメ系・ナイトライフ系・音楽系のサイトとの相性が抜群。背景は透明で枠線のみというミニマルな構成なので、ダークテーマのサイトに溶け込みやすい。
border-right: 3px solid #ff2d78 でカーソルを模した右端のラインが常時表示されているのがポイントで、「打ち込まれている最中」という状態を視覚的に示しています。ホバーするとインナーグローが強くなり、押し込みたくなる感覚を高めます。
See the Pen Neon Typewriter by BaseKENT (@basekent) on CodePen.
調整方法
- カラーテーマ:
#ff2d78をすべて#00d4ff（シアン）に置き換えるとクールな印象に一変します - 発光の強さ:
box-shadowのrgbaの第4引数（0.4 / 0.7）を大きくするほど強いグローになります - フォント:
font-familyを'Courier New'からmonospaceにするとシステムフォントに切り替わり、環境差が減ります
Cursor Blink（カーソル・ブリンク）
文字を打ち込むアニメーションではなく、ボタンの右端にカーソル（|）が常時点滅するタイプ。テキスト入力中のような「まだ何かが起きている」感を演出します。紺系のダークカラーに薄いパープルのボーダー、そして ::after 疑似要素で差し込んだカーソルが step-end で点滅を繰り返します。
ウェブアプリやSaaS系サービスのランディングページで「入力を促す」文脈のCTAに使うと自然です。「今すぐ試す」「登録する」など、インタラクションを予感させる文言と組み合わせると効果的。過剰すぎない落ち着いた演出なので、ビジネス系サイトにも使いやすい。
See the Pen Cursor Blink by BaseKENT (@basekent) on CodePen.
調整方法
- 点滅速度:
animation: cursorBlink 0.8s step-end infiniteの0.8sを変えることで点滅リズムが変わります。0.5sで速め、1.2sでゆったり - カーソル色:
::afterのcolor: #7b7bffを本文色と同じにすると馴染む、コントラストを上げると目立ちます - ボーダー色:
border: 2px solid #7b7bffを#5555ffなどに変更してアクセントカラーを合わせてください
Erase on Hover（イレース・オン・ホバー）
ホバーすると文字が消えていく、逆方向のタイプライター演出です。通常時はボタンとして自然に表示されており、マウスを乗せた瞬間に width が steps() で段階的に 0 へ縮小していきます。「消える」という予想外の動きが視覚的なインパクトになり、ユーザーの注意を一瞬引きつけます。
遊び心のある演出なので、アート系・クリエイター系のポートフォリオや、個性を出したいブログのナビゲーションに向いています。消えた後のホバー状態をどう扱うかはデザインの意図次第ですが、消えて飛ぶ体験は印象に残ります。
See the Pen Erase on Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 消えるスピード:
transition: width 0.5s steps(6, end)の0.5sを短くするとすばやく消え、長くするとじわじわ消えます - ステップ数:
steps(6, end)の6を文字数に合わせると、1文字ずつ消えていくような自然なリズムになります - 背景色:
background: #2c2c2cをブランドカラーに変更すると既存デザインに溶け込みます
Double Line Type（ダブルライン・タイプ）
2行に分かれた文字が時間差で打ち込まれるボタンです。上段に小さく補足テキスト、下段にメインのCTAテキストが animation-delay でずれて登場します。1行目が打ち終わった後に2行目が現れる構成は、「続きを読む」「→」のような誘導感が自然に生まれます。
flex-direction: column で縦並びにしたフレックスボックスで構成しており、2つの <span> がそれぞれ独立してアニメーションします。ランディングページの主役CTAや、記事の途中にある誘導ボタンとして使うと視覚的な動きが読者の目を引きとめます。シアン（#00e5ff）のアクセントカラーがホバー時のボーダーグローと連動し、全体にまとまりが出ます。
See the Pen Double Line Type by BaseKENT (@basekent) on CodePen.
調整方法
- 2行目の遅延:
animation: typeLine2 0.8s steps(7, end) 0.9s forwardsの0.9sが遅延時間です。1行目のアニメーション時間（0.6s + 0.2s）と合わせて調整してください - 上段テキストの色:
.line1のcolor: #aaaを変えることで、補足テキストの印象を調整できます - ホバーカラー:
#00e5ffを統一して変更するとアクセントカラーのテーマを切り替えられます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
