Html 如何利用仅CSS按钮标记？

出于好奇，给定一个仅CSS的按钮标记，如以下所示：，可以使用以下方法直观地创建按钮：

点击

但我们如何才能真正让它发挥作用呢？例如，将它链接到其他页面，这样当用户单击它时，她就会被重定向

我尝试将

包装在

中，但按钮文本显示为链接，这是不可取的。我也尝试了相反的方法-将

包装在

中，这似乎有效，但我被告知这不是有效的html代码

还有其他建议吗

---

另外，目标浏览器将是IE8+、chrome 14+、Firefox 11+、Safari 5+和Opera 11+，如果这有什么区别的话

使用JavaScript将操作绑定到按钮

function addEventHandler(elem,eventType,handler) {
     if (elem.addEventListener)
         elem.addEventListener (eventType,handler,false);
     else if (elem.attachEvent)
         elem.attachEvent ('on'+eventType,handler); 
}

addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
    document.location.href = "newpage.html";
});

添加到css中：

a.button { text-decoration: none; }

要创建按钮链接，请执行以下操作：

<a class="button" href="/somewhere.html">Somewhere</a>

---

您是否尝试过更改

单击

进入

---

它应该作为一个普通的链接工作，并具有css按钮样式和预期的行为。

使用JavaScript，具体来说，您可以这样做

  <div class="button" id="myButton">Click</div>


  $("#myButton").click(function()
  {
       location.href = "mypage.htm";
  });

点击
$（“#我的按钮”）。单击（函数（）
{
location.href=“mypage.htm”；
});

这可能会对易访问性、屏幕阅读器和非CSS用户造成极大的影响。虽然

在技术上不是有效的HTML，但现代浏览器应该能很好地处理它。另请参阅“语义网”讨论。谢谢您的提示。我将其与上面@VKen的答案结合起来，它提供了所需的视觉效果。感谢js解决方案，但一个更简单的html标记解决了这个问题。它适用于这种情况，但如果你想做任何比书签或其他页面链接更复杂的事情，可以使用js方法。非常正确，对于更复杂的情况，将采用js方法。再次感谢。

  <div class="button" id="myButton">Click</div>


  $("#myButton").click(function()
  {
       location.href = "mypage.htm";
  });