CSS Buttons are HTML elements that are styled using CSS to look like buttons. Buttons are commonly used in web design to provide users with a way to interact with a website, such as submitting a form or navigating to a different page.
There are many different styles and designs of CSS buttons, but they generally share some common properties, including a defined shape, a background color, text or icon content, and hover and active states that change the appearance of the button when the user interacts with it.
Here are some examples of CSS button properties:
- Button shape:
button {
border-radius: 5px;
padding: 10px 20px;
}
In this example, the border-radius property is used to create rounded corners on the button, and the padding property is used to add some space between the button content and the edges of the button.
- Background color:
button {
background-color: #007bff;
color: #fff;
}
In this example, the background-color property is used to set the background color of the button to a shade of blue, and the color property is used to set the text color to white for better contrast.
- Hover and active states:
button {
background-color: #007bff;
color: #fff;
}
button:hover {
background-color: #0069d9;
}
button:active {
background-color: #005cbf;
}
In this example, the :hover and :active pseudo-classes are used to define styles for when the user hovers over or clicks on the button. These styles change the background color of the button to different shades of blue to give visual feedback to the user.
Few examples of CSS buttons
Basic button style
<button class="button">Click me</button>
.button {
background-color: #007bff;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
In this example, a basic button is created using the button HTML element and styled using CSS. The background-color, border, border-radius, and color properties are used to define the appearance of the button, while the cursor, padding, text-align, text-decoration, display, and font-size properties are used to provide additional styling and functionality.
Hover effect
<button class="button">Hover over me</button>
.button {
background-color: #007bff;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0069d9;
}
In this example, a hover effect is added to the button using the :hover pseudo-class. When the user hovers over the button, the background color changes from blue to a darker shade of blue, creating a visual feedback effect. The transition property is used to define the speed and easing of the color change animation.
Icon button
<button class="icon-button"><i class="fas fa-heart"></i> Like</button>
.icon-button {
background-color: #fff;
border: none;
border-radius: 5px;
color: #007bff;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.icon-button i {
margin-right: 5px;
}
.icon-button:hover {
background-color: #007bff;
color: #fff;
}
In this example, an icon button is created using the i HTML element with the fas fa-heart class from the Font Awesome icon library. The margin-right property is used to add some space between the icon and the button text. The background-color and color properties are used to define the button’s initial appearance, while the :hover pseudo-class is used to define a color change effect when the user hovers over the button.
Animated button
<button class="animated-button">Submit</button>
.animated-button {
background-color: #007bff;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.animated-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 100%;
transition: width 0.3s ease, height 0.3s ease;
}
.animated-button:hover::before {
width: 400px;
height: 400px;
}
View Demo: https://codezi.pro/share/zf1873391819Re
In this example, an animated button is created using the ::before pseudo-element to create a circular shape that expands when the user hovers over the button. The background-color, border, border-radius, color, and other properties are used to style the button, while the position and overflow properties are used to position and hide the ::before element. The transition property is used to define the speed and easing of the circle’s expansion animation.
Gradient button
<button class="gradient-button">Sign up</button>
.gradient-button {
background: linear-gradient(to right, #007bff, #1e88e5);
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
In this example, a gradient button is created using the linear-gradient function to create a color gradient that transitions from blue to a darker shade of blue. The other properties are used to define the button’s basic appearance, such as the border radius, padding, and font size.
Toggle switch button
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
.toggle-switch input {
display: none;
}
.toggle-switch .slider {
background-color: #ccc;
border-radius: 34px;
cursor: pointer;
display: block;
height: 18px;
position: relative;
transition: background-color 0.3s ease;
width: 34px;
}
.toggle-switch .slider::before {
background-color: #fff;
border-radius: 50%;
content: "";
height: 12px;
left: 3px;
position: absolute;
top: 3px;
transition: transform 0.3s ease;
width: 12px;
}
.toggle-switch input:checked + .slider {
background-color: #007bff;
}
.toggle-switch input:checked + .slider::before {
transform: translateX(16px);
}
In this example, a toggle switch button is created using an input element with the type="checkbox" attribute and a span element with the slider class. The input element is hidden using the display: none property, while the slider element is styled