CSS Button Hover Effects
Beyond hover effects, this page also looks at button shadows, disabled states and width.
CSS Hoverable Buttons
Moving the mouse over a button can restyle it through the :hover pseudo-class.
Tip: How fast that change happens is up to the transition-duration property.
Example
Each button here fades smoothly into its new color on hover.
Prompt
Create a page with five buttons (Green, Blue, Red, Grey, Black) that change background color on hover. Use the CSS transition-duration property set to 0.4s for a smooth hover effect.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable Buttons</title>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.green:hover { background-color: #4CAF50; color: white; }
.blue { border-color: #008CBA; }
.blue:hover { background-color: #008CBA; color: white; }
.red { border-color: #f44336; }
.red:hover { background-color: #f44336; color: white; }
.grey { border-color: #e7e7e7; }
.grey:hover { background-color: #e7e7e7; }
.black { border-color: #555555; }
.black:hover { background-color: #555555; color: white; }
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<button class="button green">Green</button>
<button class="button blue">Blue</button>
<button class="button red">Red</button>
<button class="button grey">Grey</button>
<button class="button black">Black</button>
</body>
</html>
CSS Buttons With Shadow
Shadows on buttons come from the box-shadow property.
Example
Of these two buttons, one always has its shadow, while the other gains it only on hover.
Prompt
Create a page with two buttons: one with a permanent box-shadow, and one that only shows a box-shadow on hover. Use rgba(0,0,0,0.6) for the shadow color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons With Shadow</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; }
.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); }
</style>
</head>
<body>
<h2>Buttons With Shadow</h2>
<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on hover</button>
</body>
</html>
CSS Disabled Button
Lowering opacity makes a button look partly transparent, and that appearance reads as "disabled".
Tip: Hovering over the button shows a "no parking sign" if you also set cursor to not-allowed.
Example
Here opacity and cursor work together to make a button look disabled.
Prompt
Create a page with a normal button and a disabled-looking button. The disabled button should use opacity 0.6 and cursor not-allowed to indicate it cannot be clicked.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; cursor: pointer; }
.disabled { opacity: 0.6; cursor: not-allowed; }
</style>
</head>
<body>
<h2>Disabled Button</h2>
<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>
</body>
</html>
CSS Button Width
Buttons normally take their size from their text. To choose a specific width instead, set the width property.
Tip: A percentage, such as 50% of the parent element, keeps the width responsive, while pixels hold it fixed.
Example
Three button widths to compare: 250px, 50% and 100%.
Prompt
Create a page with three buttons stacked vertically, each with a different width: 250px, 50%, and 100%. Show how the CSS width property controls button sizing.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Width</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 0; cursor: pointer; display: block; }
.button1 { width: 250px; }
.button2 { width: 50%; }
.button3 { width: 100%; }
</style>
</head>
<body>
<h2>Button Width</h2>
<button class="button button1">250px</button>
<button class="button button2">50%</button>
<button class="button button3">100%</button>
</body>
</html>
Button on Image
Example
CSS positioning places this button over the top of an image.
Prompt
Create a page with a container holding an image and a centered button overlaid on top of it. Use CSS positioning to place the button in the middle of the image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button on Image</title>
<style>
.container { position: relative; width: 100%; max-width: 400px; }
.container img { width: 100%; height: auto; }
.btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #4CAF50; color: white; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; }
.btn:hover { background-color: #46a049; }
</style>
</head>
<body>
<h2>Button on Image</h2>
<div class="container">
<img src="img_snow.jpg" alt="Snow">
<button class="btn">Button</button>
</div>
</body>
</html>