ホームページやブログのデザインで欠かせないのが「ボタン」。
ほんの少しCSSを工夫するだけで、シンプルなボタンがグッとおしゃれになります。
今回は「たった数行のCSS」で作れるおしゃれなボタンデザインを厳選してご紹介します!
1. ホバーで色が変わるシンプルボタン
効果:ホバー時に背景色がふわっと変化する、シンプルで洗練されたボタン。
1 | <button class = "hover-button" >Hover Me</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .hover-button { padding : 10px 20px ; font-size : 16px ; border : 2px solid #3498db ; background : transparent ; color : #3498db ; cursor : pointer ; transition : all 0.3 s ease; } .hover-button:hover { background : #3498db ; color : #fff ; } |
2. グラデーションが動くボタン
効果:ホバーするとボタン内でグラデーションが動くアニメーション。
1 | <button class = "gradient-button" >Gradient</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .gradient-button { padding : 10px 20px ; font-size : 16px ; color : white ; border : none ; background : linear-gradient ( 90 deg, #ff7eb3 , #b96b6b ); background-size : 200% ; background-position : left ; border-radius : 5px ; cursor : pointer ; transition : background-position 0.5 s ease; } .gradient-button:hover { background-position : right ; } |
3. 立体的に浮き上がるボタン
効果:影を使った立体的なデザインで、ホバー時に浮き上がるような印象を与えます。
1 | <button class = "shadow-button" >Click Me</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .shadow-button { padding : 10px 20px ; font-size : 16px ; color : #fff ; background : #e17055 ; border : none ; box-shadow : 0 5px 15px rgba ( 0 , 0 , 0 , 0.2 ); transition : transform 0.3 s ease, box-shadow 0.3 s ease; cursor : pointer ; } .shadow-button:hover { transform : translateY ( -5px ); box-shadow : 0 10px 20px rgba ( 0 , 0 , 0 , 0.3 ); } |
4. ホバーで下線がスライドするボタン
効果:ボタン下に線がアニメーションでスライドする洗練されたデザイン。
1 | <button class = "underline-button" >Hover Me</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .underline-button { padding : 10px 20px ; font-size : 16px ; color : #2d3436 ; background : none ; border : none ; cursor : pointer ; position : relative ; overflow : hidden ; } .underline-button::after { content : "" ; position : absolute ; left : 0 ; bottom : 0 ; width : 100% ; height : 2px ; background : #2d3436 ; transform : scaleX( 0 ); transform-origin : right ; transition : transform 0.3 s ease; } .underline-button:hover::after { transform : scaleX( 1 ); transform-origin : left ; } |
5. 丸みのあるキラキラボタン
効果:ホバー時にボタンがキラッと輝くようなアニメーション。
1 | <button class = "sparkle-button" >Sparkle</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .sparkle-button { padding : 10px 20px ; font-size : 16px ; color : white ; border : none ; background : linear-gradient ( 90 deg, #6a11cb , #2575fc ); border-radius : 25px ; position : relative ; overflow : hidden ; cursor : pointer ; } .sparkle-button::before { content : "" ; position : absolute ; top : 0 ; left : -100% ; width : 100% ; height : 100% ; background : linear-gradient ( 90 deg, rgba ( 255 , 255 , 255 , 0.5 ), rgba ( 255 , 255 , 255 , 0 ) 70% ); transform : skewX ( -25 deg); transition : all 0.4 s ease-in-out; pointer-events: none ; } .sparkle-button:hover::before { left : 110% ; transition : all 0.4 s ease-in-out; } |
いかがでしたか?
これらのボタンデザインは、どれもたった数行のCSSで簡単に実装できるものばかりです。
ぜひ、あなたのホームページやブログに取り入れて、おしゃれなデザインを楽しんでください!