CSS Button Hover Effects
This page covers CSS button hover effects, shadows, disabled states, and width.
CSS Hoverable Buttons
The CSS :hover pseudo-class is used to change the style of a button when you mouse over it.
Tip: Use the CSS transition-duration property to determine the
speed of the "hover" effect:
Example
Hoverable buttons:
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
Try it Yourself »
CSS Buttons With Shadow
The CSS box-shadow property
is used to add a shadow to a button:
Example
Buttons with shadows:
.button1 {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
.button2:hover
{box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
Try it Yourself »
CSS Disabled Button
The CSS opacity property
can be used to add transparency to a button (creates a
"disabled" look).
Tip: You can also add the cursor property with a value of
"not-allowed", which will display a "no parking sign" when you mouse over the button:
CSS Button Width
By default, the size of a button is determined by its text content.
The CSS width property
can be used to define a specific width for a button.
Tip: Use pixels to set a fixed width, or percent for a responsive width (e.g. 50% of its parent element).
Example
Buttons with different widths:
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Try it Yourself »
Button on Image
