Javascript 如何复制这种效果？CSS3

我试图复制当您将鼠标悬停在此网站上的按钮上时所产生的效果：

宽度/高度变化缓慢，内部文本旋转。正如你所看到的，我已经掌握了一些基础知识，但感觉非常笨拙，我忍不住觉得我走错了方向。我遇到的主要问题是：

• 使文本在按钮调整大小时保持在相同的位置
• 使按钮在调整大小时保持在同一位置的中心

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

谢谢你的帮助

<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; }

软件包
包

.btn隐藏{
边框：1px实心#A37276；
溢出：隐藏；
位置：绝对位置；
z指数：7；
背景色：透明；
边框颜色：#A37276；
颜色：#A37276；
边界半径：0px；
身高：20%；
宽度：40%；
过渡：高度，缓和，0.6s，左，缓和，0.6s，宽度，缓和，1s，底部，缓和，1s；}
.btn隐藏。请参阅-p{
填充：0px；
边际：0px；
左边距：10%；
文本对齐：自动；
利润率最高：6%；
位置：绝对；}
.btn隐藏p{
左边距：10%；}
.btn隐藏：悬停{
过渡：高度，缓和，0.3s，左，缓和，1s，宽度，缓和，0.3s，底部，缓和，0.3s；
宽度：30%；
身高：18%；
左：10%；
边框：1px实心#A3474E；
颜色：#A3474E；}
.btn隐藏：悬停.hide-p{
过渡：底部，0.7s；
过渡：不透明度，0.3s；
位置：绝对位置；
底部：-0px；}
.btn隐藏：悬停。请参见-p{
过渡：顶部，1s；
顶部：150px；}
.隐藏-p{
位置：绝对位置；
底部：150px；}

为什么有多个元素？ 确保悬停前后（高度/宽度）+填充+边距相等。

垂直文本动画可以通过向悬停css添加动画来完成，如果您需要帮助，请在注释中告诉我

---

更新：

我最后在按钮中添加了一个

元素，因为我的负行高想法似乎不起作用：p

以下是带有动画跨距文本的按钮：

它使用

位置：相对与
顶部一起：某物
周围的项目。
为什么是多个元素？
确保悬停前后（高度/宽度）+填充+边距相等。

垂直文本动画可以通过向悬停css添加动画来完成，如果您需要帮助，请在注释中告诉我


更新：

我最后在按钮中添加了一个
元素，因为我的负行高想法似乎不起作用：p

以下是带有动画跨距文本的按钮：

它使用
位置：相对与
顶部一起：某物因此它不会像margin那样影响
周围的项目。
谢谢您的帮助！所以我之所以使用多个元素是为了垂直文本动画。你有没有可能也分享一下你的想法？谢谢。当然，我会用文本动画的代码更新我的答案。想法是用动画代替过渡。非常感谢，非常感谢！你的意思是要更新你的JSFIDLE吗？我看不到有任何变化。添加了一个新的带有动画文本的JSFIDLE链接。是否尝试为css添加前缀？（-webkit，-moz等）是否使用css重置？还添加了大纲：0；删除移动浏览器上的蓝色/橙色轮廓。感谢您的帮助！所以我之所以使用多个元素是为了垂直文本动画。你有没有可能也分享一下你的想法？谢谢。当然，我会用文本动画的代码更新我的答案。想法是用动画代替过渡。非常感谢，非常感谢！你的意思是要更新你的JSFIDLE吗？我看不到有任何变化。添加了一个新的带有动画文本的JSFIDLE链接。是否尝试为css添加前缀？（-webkit，-moz等）是否使用css重置？还添加了大纲：0；删除移动浏览器上的蓝色/橙色轮廓。