制作css按钮链接的更好方法答案

【问题标题】：better way to make css button link制作css按钮链接的更好方法
【发布时间】：2014-10-22 18:07:07
【问题描述】：

我已经尝试在 html 和 css 中制作带有链接标签的平滑按钮，我可以制作这样当人们悬停按钮时它不会在浏览器底部显示链接吗？然后当他们单击时，我想要一个选项来控制它是否会在新选项卡中打开链接。也许你可以改进我的按钮？

这是我的代码：

<!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>

谢谢你们。

【问题讨论】：

“浏览器按钮不显示链接”是什么意思？
当他们悬停链接时，他们可以看到它将打开的页面。我想禁用它，例如使用 javascript 打开页面的按钮，它不会显示它将打开的页面。
为什么？很高兴他们能看到这一点。无论如何，您可以使用 JS，但至少要使其具有焦点（所以保留它为 A 或添加 tabindex）。您需要 onclick-to-redirect-JS 吗？我相信 Google 知道。
好的，但是我可以做些什么来改进按钮，我是否正确地制作了 html 标签和 css ？？？我是代码网站的新手，我知道的不多。
如果它在任何地方都有效，那就是正确的。你的 HTML 和 CSS 很好。这是一个漂亮的按钮。我不确定我是否理解问题/问题...

标签： html css button hyperlink

【解决方案1】：

我认为您不能禁用此行为，因为它是浏览器的一部分。你可以做的是添加一个'#'作为你的href，并在数据属性下有真正的链接。然后，当单击按钮时，您使用您的数据属性内容将用户重定向到所述 url。

现在，您所要求的一切都不是用户友好的。取消用户查看链接指向的位置以及强制使用新标签的能力。

【讨论】：

【解决方案2】：

我可以这样当人们悬停按钮时它不会在浏览器底部显示链接吗？

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

当他们点击时，我想要一个选项来控制它是否会在新标签页中打开链接

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

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

【讨论】：

【解决方案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;
         }
     }
}

【讨论】：

你的意思是 ClassName("hiddenurl") 在我们的函数中。