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