Loading lesson path
This page covers CSS button hover effects, shadows, disabled states, and width.
Formula
:hover pseudo - class is used to change the style of a button when you mouse over it.Formula
transition - duration property to determine the speed of the "hover" effect:Hoverable buttons:.button {
transition-duration: 0.4s;
}.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}Formula
box - shadow property is used to add a shadow to a button:Formula
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)}opacity property can be used to add transparency to a button (creates a "disabled" look).
You can also add the cursor property with a value of
Formula
"not - allowed", which will display a "no parking sign" when you mouse over the button:A disabled button:.disabledbtn {
opacity: 0.6;
cursor: not-allowed;
}By default, the size of a button is determined by its text content.
width property can be used to define a specific width for a button.
Use pixels to set a fixed width, or percent for a responsive width (e.g. 50% of its parent element). 250px 50% 100%