Add a link to a hover over text change button?

Question

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

    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>
 <head>
 </head>
  <body>
   <button class="button"><span> Old text </span></button>
  </body>
</html>

So, you have done the hover text change but need to go to a specific link on click? — Mazhar Khan, Oct 22 '19 at 18:18
Possible duplicate of [How to create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) — Sean, Oct 22 '19 at 18:30

score 1 · Answer 1 · answered Oct 22 '19 at 18:28

1

Change the button to anchor tag and add an href to it e.g

<a href="https://www.google.com"><span> Old text </span></a>

I modified your code to what you want you can see the below link

Code Link: https://codepen.io/codergoldlie/pen/ZEEeYKW

answered Oct 22 '19 at 18:28

Mazhar Khan

302
1
12

How do I center the text to the button after doing this? – gdiaz Oct 24 '19 at 13:54
wrap the a tag in a p tag and style the p tag {text-align: center}, I have updated the code in the codepen link you can check that – Mazhar Khan Oct 24 '19 at 14:00

score 0 · Answer 2 · answered Oct 22 '19 at 18:18

0

I would rather suggest having a link styled like a button. This way you will have a hover effect, content change, and a link...

<a href="#your_link#" class="button">Old text</a>

answered Oct 22 '19 at 18:18

Alexey Novik

1
3

score 0 · Answer 3 · answered Oct 22 '19 at 18:23

0

You can add either href or attach a click event to button.

answered Oct 22 '19 at 18:23

Rohit Kotak

173
1
17

Add a link to a hover over text change button?

3 Answers3