3-css_pseudo.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Normal state */
button {
  background-color: blue;
  color: white;
}

/* Hover state */
button:hover {
  background-color: lightblue;
}

/* Focus state */
button:focus {
  outline: 2px solid red;
}

/* Active state */
button:active {
  background-color: darkgreen;
}
</style>
</head>
<body>

<h2>CSS Pseudo Classes</h2>

<button>Click me</button>

</body>
</html>