CSS Transition ..让文本从底部向上移动

Question

<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>

这是我的代码.我想这样做,当用户在链接上移动时,悬停框从底部或顶部移动并进入？我是CSS3过渡的新手,并不了解整体s和width事物或height？唯一的问题是我希望它或多或少可能流畅,更好地处理响应式设计..思考em和auto高度？

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

样本悬停:

Answer 1

虽然我认为CSS不是这种效果的正确语言,但我确实尝试为你创造一些东西.代码并不完美,但它可以满足您的要求:http://jsfiddle.net/Ysr7W/9/

我使用的HTML结构:

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