Sample code for button class
.button {
background: linear-gradient(45deg, #ff6b6b, #f06595);
border: none;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: white;
cursor: pointer;
font-size: 16px;
padding: 12px 24px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
Normal Button State (.button)
background: The button has a gradient background that smoothly transitions from one pink color to another.
border: There is no border around the button.
border-radius: The corners of the button are rounded, making it look smoother.
box-shadow: The button has a slight shadow, making it look like it’s slightly raised off the page.
color: The text on the button is white.cursor: When you hover over the button, the cursor changes to a pointer, indicating it’s clickable
font-size: The size of the text on the button is 16 pixels.
padding: There’s space inside the button, making it bigger and more comfortable to click (12 pixels of space on the top and bottom, 24 pixels on the left and right).
text-align: The text is centered horizontally in the button.
text-decoration: There is no underline or other decoration on the text.
transition: Any changes to the button’s appearance (like color and shadow) will happen smoothly over 0.3 seconds.
Hover State (.button:hover)
background: The gradient colors swap places, creating a subtle but noticeable change when you hover over the button.
box-shadow: The shadow becomes a bit larger and darker, making the button appear more raised.
transform: The button slightly moves up, giving a feeling that it’s being lifted.
Sample code for hover in css
.button:hover {
background: linear-gradient(45deg, #f06595, #ff6b6b);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
