CSS3 Hover Text Slide Effect

Ever since I saw the USA Today case study video I've always been a fan of the work Fantasy Interactive have been putting out. They always do something different in terms of design and layout on each site they create.

One piece of work I've been really impressed with is their re-design of the Wacom website. Great use of colour, photography, and subtle animations. The hover animations in particular I thought added a great feel to the site and for some reason I thought it would be really cool to figure out how they worked and replicate them. Thus this tutorial was born.

This page will go through how the button hover animation work, the ones that slide text up to show another piece of text (in the case of the Wacom site, the same text). I only figured out how to do it vertically.

DEMO

The Code

First the HTML together for a the button.

<div class="blue-btn">
  <a class="first-link" href="">
    First Text
  </a>
  <a href="">
    Second Text
  </a>
</div>

And that's pretty much it, the rest is all CSS.
I'll stick all the final code here and go through certain parts.

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

.blue-btn{
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover{
   background-color: #003D99;
}

.blue-btn a:hover{
  text-decoration: none;
}

.first-link{
  margin-top: 0em;   
}

.blue-btn:hover .first-link{
  margin-top: -4em;
}

CSS Explained

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}   

** Display block ** here is very important as I've said in the comment to position the buttons vertically, one above the other.

.blue-btn{
  height: 64px;
  width: 200px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  background-color: #3b5998;
}

The ** height and width ** have to be specified. The overflow has to be ** hidden ** so you can't see the 'Second Text' button (look at html). The line height of the font (4em) centers the text vertically in the button, but this might change depending on the height.

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

CSS3 transitions (notice no -o- prefix since opera now supports webkit). Without this the button will just pop instead of slide. I'm sure you can do this in js but, meh.

.blue-btn:hover{
   background-color: #003D99;
}

Changing the background colour when you hover is optional but adds a really cool effect to the button, as if the new text that slides up is a completely different button alltogether.

.blue-btn:hover .first-link{
  margin-top: -4em;
}

This piece of code is the only reason we've given the 'first-link' class to the first link. This code makes the first link move up when you hover over 'blue-btn'.

Everything else is pretty self explanatory. You can check out a demo of the final thing below (and above).

DEMO