CODEWITHSUNDEEP
cssmobileresponsive-designcss-transitions
TheBlackBenzKid
TheBlackBenzKid

Reputation: 27087

CSS Transition.. Make the text move up from the bottom

<style type="text/css">
   .button2 {
       font-family: "Georgia Pro", Georgia;
       background: #000;
       color: #fff;
       text-decoration: none;
       padding: 5px 15px;
       border: 3px solid #000;
       font-size: 14px;
   }

   .button2:hover {
       border: 3px solid #000;
       background: #fff;
       color:#000;
   }
</style>

<a href="#link" class="button2" title="ADD TO SHOPPING BAG"><span>ADD TO SHOPPING BAG</span></a>

This is my code. I want to make it so that when the user moves over the link, the hover box moves from the bottom or top and comes in? I am very new to CSS3 transitions and don't understand the whole s and width thing or height? The only thing is I want it more or less maybe fluid and better to handle responsive design.. think em and auto height??

jsFiddle: http://jsfiddle.net/Ysr7W/2/

Sample hover:

enter image description here

Upvotes: 2

Views: 3961

Answers (1)

Pieter de Jong
Pieter de Jong

Reputation: 114

Although i think CSS isn't the right language for this effect, i did try to create something for you. The code isn't perfect, but it does what you requested: http://jsfiddle.net/Ysr7W/9/

The HTML structure i used:

<a href="#" class="button">
    <span class="white">ADD TO SHOPPING BAG</span>
    <span class="black">ADD TO SHOPPING BAG</span>
</a>​

Upvotes: 6

Related Questions