【コピペOK】CSSだけで作る！おしゃれボタン20選

シンプルで使いやすいCSSボタンの作り方を、実際に使えるHTML/CSSコードと共にわかりやすく紹介します。ホバー効果やアニメーション、レスポンシブ対応までカバーしているので、コピペで即導入できます。

初心者から実務者まで使える「CSSボタン」の作り方を、サンプルコード付きで丁寧に解説します。標準的なフラットボタン、ホバーアニメーション、アイコン付きボタン、レスポンシブ対応など主要パターンを網羅。HTML/CSSのみで実装でき、コピー＆ペーストでそのまま使えるコードを多数掲載しています。

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

1. 基本の王道系（5選）

① シンプルな塗りつぶし

② 枠線のみ（ゴーストボタン）

③ 角丸ピル型

④ 立体的な押し込みボタン

⑤ グラデーションボタン

2. アイコン付き・機能系（5選）

⑥ 右矢印つき（flexで配置）

⑦ ダウンロードアイコン

⑧ 外部リンク用

⑨ カート追加

⑩ 上に戻るボタン

3. 視覚効果・CV重視系（5選）

⑪ キラッと光る

⑫ ふわふわ浮く

⑬ 背景がスライドして塗りつぶし

脈打つ（パルス）

⑮ ネオン風

マイクロインタラクション・特殊系（5選）

⑯ リップルエフェクト

テキストリンクの下線が伸びる

⑱ SNSシェアボタン

⑲ disabled風（無効状態） ※aタグにはdisabled属性がないため、クラスとCSSで再現します。

⑳ 円形のフローティングアクションボタン（FAB）