css - CSS 过渡.. 使文本从底部向上移动

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