CSSボタンスニペット
コピペで使えるVanilla CSSボタンデザイン 50種類以上
ベーシック（青）
シンプルで使いやすい基本ボタン
ベーシック（緑）
送信・完了アクション向け
ベーシック（赤）
警告・削除アクション向け
ベーシック（オレンジ）
CTA向けの目立つ色
ベーシック（紫）
高級感・プレミアム向け
ベーシック（ピンク）
女性向け・ポップなデザイン
ベーシック（シアン）
情報・ヘルプ向け
ベーシック（グレー）
セカンダリアクション向け
ベーシック（黒）
モノトーン・シックなデザイン
ピル型
角丸のピル型ボタン
ブルーパープル
モダンな印象
ピンクオレンジ
CTA向けの目立つ色
グリーンミント
爽やかな印象
サンセット
温かみのある色合い
オーシャン
深い青のグラデ
ファイア
炎のような赤
パープルピンク
女性向けグラデ
ダークグラデ
シックな黒グラデ
ゴールド
高級感のあるゴールド
レインボー
虹色グラデーション
スライドイン
背景が横からスライド
グローエフェクト
ホバーで光る
シャインエフェクト
光が走る
バウンス
跳ねるアニメーション
スケールアップ
ホバーで拡大
シェイク
揺れるアニメーション
ローテート
少し回転する
リップル
波紋エフェクト
3D（青）
押し込む感覚
3D（緑）
購入ボタン向け
3D（赤）
警告アクション
3D（紫）
高級感
3D（オレンジ）
CTA向け
レトロ3D
ゲーム風
ピクセル風
ドット絵風
アウトライン（青）
シンプルな枠線
アウトライン（黒）
落ち着いた印象
アウトライン（緑）
確認アクション
アウトライン（赤）
警告・取消
アウトライン（紫）
高級感
ラウンドアウトライン
丸みを帯びた枠線
破線アウトライン
点線の枠
矢印付き
テキスト矢印
ダウンロード
下矢印付き
プラス付き
追加アクション
チェック付き
完了アクション
カート
EC向け
動くグラデ
背景が動く
パルス
ドキドキ
回転ボーダー
枠が回る
ローディング
ドット点滅
ニューモーフィズム
立体的な陰影
グラスモーフィズム
透明感
ネオン
サイバーパンク
ネオンピンク
ピンクネオン
ミニマル
シンプル
テキストリンク風
リンク風ボタン
スキュー
斜めデザイン
ダブルボーダー
二重の枠線
ソフトシャドウ
柔らかい影
ハードシャドウ
くっきり影
使い方
- 気に入ったボタンの「CSSをコピー」をクリック
- CSSファイルにペースト
- HTMLで対応するクラスを使用
<button class="btn-grad-blue-purple">ボタン</button>
CSSをコピーしました