CSS3 Transitions

by Stephen Herd

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Exercise 18-1: Transitions</title>
    <style>
    </style>

  </head>

  <body>
    <nav>
      <ul>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
        <li><a href="#">SALE</a></li>
      </ul>
    </nav>

  </body>

</html>

CSS

body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  margin: 6em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

a {
  display: block;
  width: 6em;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  letter-spacing: .1em;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 1px solid rgb(175,175,175);
  position: relative;
  top: 0;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    top 0.3s;
}

a:hover {
  color: darkblue;
  background-color: lightblue;
  border-color: darkblue;
}

a:active {
  color: white;
  background-color: darkblue;
  top: 3px;
}