Добавить ссылку на кнопку изменения текста? - PullRequest
Новая
       50

Добавить ссылку на кнопку изменения текста?

0 голосов
/ 22 октября 2019

Я создаю кнопку, которая будет показывать описание при наведении на нее курсора. Но я хочу перейти по ссылке после нажатия, как мне добавить ссылку на кнопку, так как у меня есть наведение: 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>

Ответы [ 3 ]

1 голос
/ 22 октября 2019

Измените кнопку на якорный тег и добавьте к нему href, например: 

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

Я изменил ваш код так, как вы хотите. Вы можете увидеть ниже ссылку

Код ссылки: https://codepen.io/codergoldlie/pen/ZEEeYKW

0 голосов
/ 22 октября 2019

Вы можете добавить href или прикрепить событие click к кнопке.

0 голосов
/ 22 октября 2019

Я бы предпочел иметь ссылку в стиле кнопки. Таким образом, вы получите эффект наведения, изменение содержимого и ссылку ...

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

...