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