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:

Green</button> <button type="button" class="btn border222">Blue</button> <button type="button" class="btn border333">Red</button> <button type="button" class="btn border444">Grey</button> <button type="button" class="btn border555">Black</button>

Example

.button {
  transition-duration: 0.4s;
}

.button:hover {

background-color: #4CAF50; /* Green */
  color: white;
}

CSS Buttons With Shadow

The CSS box-shadow property is used to add a shadow to a button:

<button type="button" class="btn shadow1">Shadow Button</button> <button type="button" class="btn shadow2">Shadow on hover</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)}

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:

Disabled Button</button>

Example

.disabledbtn {
  opacity: 0.6;
  cursor: not-allowed;
}

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).

<button type="button" class="btn btn1 width1">250px</button> <button type="button" class="btn btn2 width2">50%</button> <button type="button" class="btn btn1 width3">100%</button>

Example

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}

Button on Image

<img src="img_lights.jpg" alt="Snow" style="width:100%;"> <button class="w3-button w3-light-grey w3-hover-black w3-round w3-display-middle">Button</button>