html - 如何使用纯 CSS 按钮标记？

Question

出于我的好奇心，给定一个像这样的纯 CSS 按钮标记：http ://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043，可以使用以下方法直观地创建一个按钮：

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

但是我们如何才能真正让它发挥作用呢？例如，让它链接到其他页面，所以当用户点击它时，她会被重定向。

我尝试将 a 包裹在<a href>内<div>，但按钮文本显示为链接，这是不可取的。我还尝试了相反的方法-将<div>内部包装 a <a href>，这似乎可行，但有人告诉我这不是有效的 html 代码。

还有什么建议吗？

PS 目标浏览器将是 IE8+、chrome 14+、Firefox 11+、Safari 5+ 和 Opera 11+，如果这有什么不同的话。

Answer 1

你试过改变

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

进入<a class="button" href="#your_link">Click</a>？

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

Answer 2

使用 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";
});

Answer 3

添加到CSS：

a.button { text-decoration: none; }

要创建按钮链接：

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

Answer 4

使用 JavaScript，特别是jQuery，你可以做到

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


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