<div class='main-content'>
   <div class='header-group'>
      <h1>CSS Animations - Hover</h1>
   </div>
<div class='btn-group'>
   <a href="#" class='btn' id='btn1'>Lighten on :hover</a>
   <a href="#" class='btn' id='btn2'>Darken on :hover</a>
   <a href="#" class='btn' id='btn3'>Color change on :hover</a>
</div>
</div>   
body {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
}
.header-group {
   display: block;
   text-align: center;
}
h1 {
   position: relative;
   display: inline-block;
   text-align: center;
   font-size: 3rem;
   margin-bottom: 1em;
   padding: 0.25em 0;
}
h1:after {
   content: "";
   border-bottom: 3px solid black;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
.main-content {
   margin-top: 5vw;
}
.btn-group {
   display: block;
   width: 100%;
   clear: both;
   text-align: center;
   .btn {
      display: block;
      width: 8em;
      padding: 1em 2.5em;
      margin: 0 auto 1.5em;
      background-color: blue;
      color: white;
      text-decoration: none;
      transition: all .4s ease-out;
   }
   #btn1:hover {
      background-color: lighten(blue, 15%);
   }
   #btn2:hover {
      background-color: darken(blue, 15%);
   }
   #btn3:hover {
      background-color: yellow;
      color: black;
   }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.