こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ボタンデザインはサイトの印象を大きく左右する重要な要素です。
しかし、毎回デザインを考えるのは大変ですよね。
そこで今回は、CSSだけで簡単に実装できるおしゃれなボタンデザイン20種類をご紹介します！
どれもコピペOKなので、ぜひあなたのサイトで活用してください。
1. ホバーで色が変わるボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
2. グラデーションが動くボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
3. 3D風に押せるボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
4. テキストがスライドするボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
5. 枠線が動くボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
6. タイプライター風アニメーションボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
7. アイコン付きアニメーションボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
8. シャドウが拡大するボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
9. 押すと光るボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
10. テキストが回転するボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
11. ボーダーが波打つボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
12. レインボーボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
13. ドットアニメーションのボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
14. クリックで波紋が広がるボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
15. マグネットエフェクトボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
16. ローディング風ボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
17. ネオン風ボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
18. 揺れるボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
19. クリックで形が変わるボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
20. 立体風プレスボタン
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
CSSだけでさまざまなボタンデザインを実装できることがわかりました。ボタンはWebサイトの中でも重要な要素なので、デザインの工夫次第でより魅力的なサイトを作ることができます。
ぜひ今回紹介したボタンデザインを活用して、あなたのサイトにぴったりなボタンを作ってみてください！
satokotadesignキャンペーン実施中！
