转换按钮显示新文本

Question

当我将鼠标悬停在按钮上时，我想转换为新文字。

我已经设法转换出盒子阴影和颜色，但似乎无法显示下一个。

到目前为止我的代码：

CSS：

#button2 {
    border: 1px solid black;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    background-color: #fea710;
     box-shadow: 3px 3px 3px #888888;
         display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    padding: 12px 32px;
    font-family: arial;
    letter-spacing: .5px;
    font-weight: 400;
      transition-property: box-shadow, background-color, content;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}

#button2:hover {
  box-shadow: 0 0 0 #888888;
    background-color: #fec35c; 
    content: "New text";
  }

HTML：

<a href="mylink" id="button2">start a free trial</a>

Answer 1

Try this

<a href="mylink" id="button2"><span>start a free trial</span></a>

In CSS

#button2:hover span {display:none}
#button2:hover:before {content: "New text"}