如何复制这种效果？ CSS3

Question

我尝试复制当你将鼠标悬停在一个按钮，这个网站上出现这种情况的影响：

http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

宽度/高度变化缓慢和文本里面打转。我已经掌握了基本知识，可以看到，但感觉真的很笨拙，我不禁感到我正在以这种错误的方式去做。我遇到的主要问题是：

• 让按钮调整大小时，文本保持在相同位置。
• 当调整大小时，让按钮保持居中位置。

我一直在试图让它只使用css3/html，但也许我应该使用JS？

https://jsfiddle.net/1td9bkLt/

帮助表示赞赏。

<div class="btn-hidden"> 
<p class="hide-p">PACKAGES</p> 
<p class="see-p">PACKAGES</p> 
</div><!--button--> 

.btn-hidden { 
border: 1px solid #A37276; 
overflow: hidden; 
position: absolute; 
z-index: 7; 
background-color: transparent; 
border-color: #A37276; 
color: #A37276; 
border-radius: 0px; 
height: 20%; 
width: 40%; 
transition: height, ease, 0.6s, left, ease, 0.6s, width, ease, 1s,  bottom, ease, 1s; } 
.btn-hidden .see-p { 
padding: 0px; 
margin: 0px; 
margin-left: 10%; 
text-align: auto; 
margin-top: 6%; 
position: absolute; } 
.btn-hidden p { 
margin-left: 10%; } 
.btn-hidden:hover { 
transition: height, ease, 0.3s, left, ease, 1s, width, ease, 0.3s, bottom, ease, 0.3s; 
width: 30%; 
height: 18%; 
left: 10%; 
border: 1px solid #A3474E; 
color: #A3474E; } 
.btn-hidden:hover .hide-p { 

    transition: bottom, 0.7s; 
    transition: opacity, 0.3s; 
    position: absolute; 
    bottom: -0px; } 
.btn-hidden:hover .see-p { 
    transition: top, 1s; 
    top: 150px; } 


.hide-p { 
position: absolute; 
bottom: 150px; } 

Answer 1

为什么有多个元素？ 确保悬停前和悬停时（高度/宽度）+填充+边距相等。 https://jsfiddle.net/1td9bkLt/1/

垂直文本动画可以通过添加一个动画悬停CSS来完成，如果你需要帮助，让我知道在评论中。

---

更新：

我最终加入，因为我负的line-height想法按钮内<span>元素似乎不工作：P

下面是用动画跨度文本按钮： https://jsfiddle.net/seahorsepip/1td9bkLt/3/

它采用position: relative;连同top: something;所以像边距就不会影响<span>周围的物品。