0h85gw
Last Updated: July 03, 2018
·
86.42K
· 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

Say Thanks
Respond

20 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 ·
28999

cool thanks dude it helped me to understand the transition effect :)

over 1 year ago ·
29543
7 months ago ·
29702

if you want to watch movies online for free but i can't afford to have netflix account then don't worry we have just shared free netflix account list with username and password https://techcloud7.net/netflix-account-username-password.html where you could easy get you work done.

5 months ago ·
29753

Biographical research is defined by Miller as a research method that collects and analyses a person's whole life, or portion of a life, through the in-depth and unstructured interview, or sometimes reinforced by semi-structured interview or personal documents.[17] It is a way of viewing social life in procedural terms, rather than static terms. The information can come from "oral history, personal narrative, biography and autobiography” or "diaries, letters, memoranda and other materials"

https://freenetflixaccounts2018a.weebly.com/

https://frpbypassapplicationdownload.weebly.com/

http://site-1323530-7842-6459.strikingly.com/

https://kodipairfixtoallkodierrors.yolasite.com/

http://site-1341622-4580-3782.strikingly.com/

4 months ago ·
29792
29820

Hi Buddy, Looking for Free Netflix Accounts https://www.nextleveltricks.com/free-netflix-account/ If YES, You just landed at right place because we recently posted premium free netflix accounts for free April 2018 edition. There is no need to use netflix accounts generator or do any kind of survey on the internet to get those netflix accounts generator.

3 months ago ·
29821

OGYoutube Apk 2018 is a great Youtube Downloader which you can try today. OGYoutube Downloader APK allows you to download Youtube videos in 4k, HD and in lower resolutions as well http://ogyoutubeapk.net/ and Get Grammarly premium for free 2018 https://www.nextleveltricks.com/grammarly-premium/ – Today we are going to discuss about working methods

3 months ago ·
29926
2 months ago ·
29928

if you

about 2 months ago ·
29991
about 1 month ago ·
30039

If you are a rose, I want to stretch my arms, leaving the thorns to make my hands bloody. I promise to take care of you, just like the sites I'm seo and I just believe you have other things to worry about.
http://happy-wheelsgames.com happy wheels
http://geometrydash-game.com geometry dash
http://happy-wheelsgames.com/basketball-legends-game basketball legends game

27 days ago ·
30076

Today I will talk about Netflix, how to get free Netflix, Netflix premium account, and tips & tricks on Netflix.easy get you work done https://www.xavixstore.com/netflix-premium-account/

20 days ago ·
30096
15 days ago ·