前回は「ボタンの基本的な動作」を紹介しましたが、今回はいくつかコピペ用に”汎用性の高いシンプルなボタン”を紹介したいと思います。
↓前回の記事はこちら
いろんなところで使えるように、メンテナンスも難しくなさそうなものを10個作ってみたので、ご自由にお使いください。
なんにでも使える汎用ボタン
シンプルに色が変わるボタン
See the Pen おしゃれボタン-K-シンプル by 海辺のカラス (@seaside-crow) on CodePen.
影をつけて立体的に
See the Pen おしゃれボタン-K-シンプル立体 by 海辺のカラス (@seaside-crow) on CodePen.
立体ボタンを丸くしてみるとこうなる
See the Pen おしゃれボタン-K-立体丸ボタン by 海辺のカラス (@seaside-crow) on CodePen.
枠線を使って立体的に
See the Pen おしゃれボタン-K-シンプル立体2 by 海辺のカラス (@seaside-crow) on CodePen.
カチッとなるボタン
See the Pen おしゃれボタン-K-スイッチ by 海辺のカラス (@seaside-crow) on CodePen.
光って見えなくもない角丸ボタン
See the Pen おしゃれボタン-K-グラデーション by 海辺のカラス (@seaside-crow) on CodePen.
枠線の変化でそれっぽく
See the Pen おしゃれボタン-K-ボーダー by 海辺のカラス (@seaside-crow) on CodePen.
二重線の丸ボタン
See the Pen おしゃれボタン-K-2重ボーダー丸ボタン by 海辺のカラス (@seaside-crow) on CodePen.
スライド式に色が変わるボタン
See the Pen おしゃれボタン-K-スライド色変更 by 海辺のカラス (@seaside-crow) on CodePen.
参考：CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
線と背景がズレてるボタン
See the Pen おしゃれボタン-K-透けてるボタン by 海辺のカラス (@seaside-crow) on CodePen.
すっごくシンプルに作ってます
今回のボタンは、自分の備忘録も兼ねてます。
企業向けと書いていますが、文言やサイズ・色の変更だけでどんなサイトでも使えますね。
シンプルさを意識して作ったボタンなので、みなさんもどうぞお使いください。
