lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webLightBasicChapter2Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter3Title

# Pseudo-class

`CSS pseudo-class` applies styles to elements in a specific state (e.g., click, focus) on a web page.

Pseudo-classes are used by appending a colon (`:`) to the selector. A commonly used pseudo-class is `:hover`.

The hover pseudo-class specifies a style when the mouse pointer is over an HTML element.

Check out the example below using the `:hover` pseudo-class.

<br />

```html title="HTML button with class my-button"
<html>
  <body>
    <button class="my-button">Hover Me</button>
  </body>
</html>
```

<br />

## CSS

```css title="Applying CSS to my-button"
.my-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0000ff;
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  border: none;
}

.my-button:hover {
  background-color: #ff0000;
}
```

The above CSS code styles the button (`<button>`) element with the `.my-button` class.

The my-button class uses the `.my-button:hover` pseudo-class to change the background color to red when the mouse pointer is over the button.

It is noteworthy that the `transition` property adds a smooth animation to the property changes.

In this example, the background-color change is given a 0.3 seconds transition effect, making the button's color change smooth.