0h85gw
Last Updated: January 21, 2017
·
56.68K
· ceiga

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

7 Responses
Add your response

9448
0e2e822d32a7ab3d7f0b7098d03b1d16

Just make sure your hrefs are the same on both links, or make only the element that gets moved into view a link, otherwise you'll run into some really interesting bugs :)

(or make the container a link and the children spans)

over 1 year ago ·
9478
C935962b018f7375d32a481110b99895

I'm sorry the link DEMO is broken, it shows me a empty white page.

over 1 year ago ·
9481

That's odd. Here's the link anyway. http://codepen.io/RichardBray/pen/julhw

over 1 year ago ·
9687

Great work! Another option would be to make the containing element an anchor element, and make the elements within them divs or spans set to display: block. This would avoid any bugs with the anchor tags like ultimatedelman mentioned, and semantically makes for slightly better markup.

over 1 year ago ·
15211
Sagive mini 213x213

@ev_rowe is right... double linking plus hiding them might get the big brother (google) a bit confused and raise some flag, but gr8 work, thanks for sharing ;)

over 1 year ago ·
16195
Edb6efad8ed31a52d27b40dd82937e13 normal

A great bit of code, just curious though before trying this out - how does it fare on older browsers? Most of my site users have used IE10/11 or the latest versions of google/chrome (predominantly firefox/chrome users), but just in case....

over 1 year ago ·
16197

Good question. I haven't tested it but it should work fine in IE11, not sure about IE10.

over 1 year ago ·