CodePen

HTML

            
              <nav role='navigation'>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Clients</a>
  <a href="#">Contact Us</a>
</nav>  
            
          
!

CSS

            
              nav a {
  display: block;
  float: left;
  padding: 1em;
  background: red;
  color: white;

  -webkit-transition: background .5s, padding .5s;
     -moz-transition: background .5s, padding .5s;
       -o-transition: background .5s, padding .5s;
          transition: background .5s, padding .5s;
}

nav:hover a {
  padding: 1em .5em;
}

nav a:hover {
  background: #BADA55;
  padding: 1em 2.5em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................