如何復制這種效果？ 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上來完成垂直文本動畫。

---

更新：

我最終在按鈕內添加了<span>元素，因為我的負線高想法似乎不起作用：P

這是帶有動畫范圍文本的按鈕： https : //jsfiddle.net/seahorsepip/1td9bkLt/3/

它使用position: relative; 與top: something;一起top: something; 因此，它不會像邊距那樣影響<span>周圍的項目。