Buttons in CSS
Buttons in CSS
CSS buttons can be styled in various ways depending on the design of your webpage. Here are a few examples of common button styles using CSS:
- Flat button:
button.flat-button {
background-color: #ffffff;
color: #333333;
border: 2px solid #333333;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 10px;
cursor: pointer;
}
This style creates a simple flat button with a white background, black text, and a black border. The border-radius property rounds the corners of the button, and the padding property creates space around the text. The cursor property changes the mouse pointer to a hand when hovering over the button.
- Gradient button:
button.gradient-button {
background-color: #50c878;
background-image: linear-gradient(to bottom, #50c878, #5ed680);
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 10px;
cursor: pointer;
}
This style creates a button with a gradient background color that goes from light green to dark green. The background-image property sets the gradient, and the background-color property provides a fallback color for browsers that do not support gradients.
- Outline button:
button.outline-button {
background-color: #ffffff;
color: #333333;
border: 2px solid #333333;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 10px;
cursor: pointer;
}
button.outline-button:hover {
background-color: #333333;
color: #ffffff;
}
This style creates a button with a white background, black border, and black text. On hover, the background color changes to black and the text changes to white.
These are just a few examples of button styles using CSS. You can customize the styles to fit your webpage’s design by adjusting the properties and values used.