In this CSS article we want to learn about How to Style Buttons with CSS, Buttons are an essential element in web design and styling them with CSS can enhance their appearance and usability. in this article we want to discuss some CSS techniques for styling buttons.
How to Style Buttons with CSS
For styling a button in CSS you can use the button or input element and apply CSS properties to it. basic styling includes changing the background color, font size, font color and border.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } |
Hover effects can add interactivity to buttons and it makes them more engaging for users. you can use CSS to change the button appearance when the user hovers over it.
|
1 2 3 |
button:hover { background-color: #3e8e41; } |
You can use the border-radius property to create rounded corners on buttons. this technique can soften the button appearance and make it more visually appealing.
|
1 2 3 |
button { border-radius: 8px; } |
Gradient backgrounds can add depth and dimension to buttons. you can use CSS to create gradient backgrounds for buttons by using the background-image property.
|
1 2 3 |
button { background-image: linear-gradient(to bottom, #4CAF50, #008CBA); } |
Box shadow can be used to create 3D effect on buttons and this makes them stand out from the rest of the page. you can use CSS to add box shadow to buttons by using box-shadow property.
|
1 2 3 |
button { box-shadow: 0px 5px 5px #888888; } |
Transition effects can add animation to buttons and this makes them more dynamic and visually interesting. you can use CSS to add transition effects to buttons by using the transition property.
|
1 2 3 4 5 6 7 |
button { transition: background-color 0.5s ease; } button:hover { background-color: #3e8e41; } |
This is complete code with HTML
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html> <head> <title>Button Styling with CSS</title> <style> button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; background-image: linear-gradient(to bottom, #4CAF50, #008CBA); box-shadow: 0px 5px 5px #888888; transition: background-color 0.5s ease; } button:hover { background-color: #3e8e41; } </style> </head> <body> <button>Click Me</button> </body> </html> <!DOCTYPE html> <html> <head> <title>Button Styling with CSS</title> <style> button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; background-image: linear-gradient(to bottom, #4CAF50, #008CBA); box-shadow: 0px 5px 5px #888888; transition: background-color 0.5s ease; } button:hover { background-color: #3e8e41; } </style> </head> <body> <button>GeeksCoders.com</button> </body> </html> |
This code creates a button that is styled with green gradient background, rounded corners, box shadow and a transition effect. when the user hovers over the button, the background color changes to a darker shade of green. you can copy and paste this code into an HTML file and see how it looks in your web browser.
This will be the result
Learn More on CSS
- How to Center Text in CSS
- CSS Animation Tutorial
- CSS Grid Tutorial
- How to Use Flexbox in CSS
- How to Create CSS Dropdown Menu
- CSS Border Tutorial
- CSS Box Model Tutorial
- How to Style Form Elements with CSS
- How to Create CSS Tooltip
- CSS Typography Tutorial
- CSS Variable Tutorial
- CSS Hover Effect Tutorial
- How to Create CSS Slideshow