見た目を選ぶ
各パターンと5色の組み合わせから、近いデザインを探します。
CSS COLLECTION
CSSボタンサンプル集
20パターンを5色ずつ用意しました。各ボタンをクリックすると基本CSSをコピーできます。
HOW TO USE
使い方と注意点
クリックしてコピー
サンプルをクリックすると、クラス名または基本CSSをコピーします。
制作物に合わせる
色、余白、速度などをサイトのデザインに合わせて調整します。
注意点
- コピーする内容は出発点です。実装先のCSS設計に合わせて調整してください。
- アニメーションは `prefers-reduced-motion` を考慮し、必要に応じて動きを抑制してください。
- ボタンの色だけに意味を持たせず、ラベルや状態も明確にしてください。