I am creating a button that will show a description when you hover over it. But I want go to a link once clicked, how do I add the link to the button since I have a hover:before {content:"New Text"}

```css
    button {width:20em}
    button {height:5em}
    button {
      box-shadow:inset 34px 0px 0px -15px #88bd40;
      background-color:#000000 ;
      border:1px solid #ffffff;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      font-weight:bold;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px -1px 0px #7a2a1d;

      }
     button:hover span {display:none}
     button:hover {
     background-color:#4c4c4c;}
     button:hover:before {content:"New Text"}
```

```html
<html>
 <head>
 </head>
  <body>
   <button class="button"><span> Old text </span></button>
  </body>
</html>
```