Flash cards
Review the key moves
What is the main idea behind CSS Button Hover Effects?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-duration: 0.4s;Put the learning moves in the order that makes the concept easiest to apply.
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
.button {
transition-duration: 0.4s;
} .button:hover {
background-color: #4CAF50; /* Green */
color: white;
}Live preview
CSS Buttons With Shadow
The CSS box-shadow property is used to add a shadow to a button:
Example
.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)}Live preview
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:
Example
.disabledbtn {
opacity: 0.6;
cursor: not-allowed;
}Live preview
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
.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}Live preview