Question

我尝试在html和css中创建一个带有链接标记的平滑按钮，当人们将鼠标悬停在按钮上时，它是否会显示在浏览器底部的链接？然后当他们点击我想要一个选项来控制它是否会在新标签中打开链接。也许你可以改进我的按钮？

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Professional Website</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu" type="text/css">
    <style type="text/css">
	  .button {
        background-color: #3366FF;
        padding: 10px 30px;
        border-radius: 5px;
        color: lightblue;
        font-family: 'Ubuntu', Arial;
        font-size: 14px;
        text-decoration: none;
	  }
	  .button:hover {
        background-color: #0066FF;
        -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
        box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
	  }
      .button:active {
	    border: 1px solid #0033CC;
		-webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
        box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
      }
    </style>
  </head>
  <body>
    <br />
    <br />
    <center>
      <a class="button" href="#">Link Button</a>
    </center>
  </body>
</html>

＆＃13;

谢谢你们。

Answer 1

我不认为您可以禁用此行为，因为它是浏览器的一部分。你可以做的就是添加＃＆＃39;＃＆＃39;作为你的href，并拥有数据属性下的真实链接。然后，当单击该按钮时，您可以使用数据属性内容将用户重定向到所述URL。

现在，你要问的一切都不是用户友好的。删除用户查看链接指向的位置的能力，以及强制新选项卡。

Answer 2

当人们悬停按钮时，我是否会这样做，它不会在浏览器底部显示链接？

这是浏览器的默认行为，当您将鼠标悬停在链接上时，它会向用户显示目标左下角。遗憾的是，你无法设置这个样式，并且当将鼠标悬停在带有href的锚标签上时它总会显示出来。替代方法是使用表单/提交工作或使用JS重定向用户。

点击后我想要一个选项来控制是否会在新标签页中打开链接

您可以使用锚标记的target属性并指定_blank，它将在新标签/窗口中打开新链接（取决于用户浏览器的设置）

<a class="button" href="#" target="_blank">Link Button</a>

Answer 3

以下是如何做到的：

将href添加为数据属性，如下所示：

<a class="hiddenurl" data-href="YOUR_URL">LINK_TEXT</a>

然后在javascript中：

window.onload = function(){

     aLinks = document.getElementsByClassName("hiddenurl");

     for(var i = 0; i < aLinks.length; i++){
         aLinks[i].onclick = function(){
             window.location.href = this.dataset.href;
         }
     }
}

更好的方法来制作CSS按钮链接

3 个答案: