CSS按钮两个链接

我在网上找到了这个漂亮的按钮。现在我想知道有没有可能把它和什么联系起来？

尽管a href属性仅适用于元素，但您可以向任何元素添加单击事件以调用url

或者你可以用一个a来包裹一个跨度

我认为这个按钮的目的是用AJAX发送一些东西（可能是一个表单），然后显示
谢谢
-端

如果将它与
href
一起使用到另一个页面，则在您离开该页面时将不会看到
谢谢
-端

如果没有一些JavaScript，
div
上的
href
将永远无法工作。按钮效果在没有JavaScript的情况下也可以工作，但就其本身而言是毫无意义的

更新了示例，将其用作下载链接

为了使按钮适用于非JS用户，您应该将
href
设置为您希望他们下载的文件。不幸的是，对于非JS用户，它不会显示
谢谢
-端。
我还向按钮添加了一个ID（
#btn download
），以便于在JS中获取它

HTML

<a id="btn-download" href="http://www.domain.com/some_file.pdf" class="flipper-container">
    <div id="id" class="flipper">
        <div class="front-face" data-icon="&#x27a3;">Click Me</div>
        <div class="back-face" data-icon="&#10003;">Thank You</div>
    </div>
</a>

我还没有在各种浏览器中测试过它，但我认为它应该可以在所有现代浏览器（Chrome、Firefox、Opera和Safari）和Internet Explorer中使用，至少可以使用7版。
使用JS<代码>谢谢

该按钮的特殊之处在于，它在没有javascript的情况下工作。请改用标记。我相信你可以通过css改变他。如果你尝试一下，你会发现它不起作用：（如果你用一个

a

元素来包装它，它会破坏整个点击效果。好吧，mhh我认为它在没有js的情况下可以工作。我想用这个技术作为下载按钮。只需要一点JavaScript就可以了。你想要一个例子吗？太好了。我能为禁用js的用户做些什么吗？@user2693017我已经用JavaScript（和HTML）更新了我的答案。若这让你们满意，请将其标记为已解决。谢谢@Ex-it，我会尽快测试它。：）

(function (d, w) {
    var button = d.getElementById('btn-download');
    // Store the download link
    var downloadLink = button.href;

    // Set the href back to the id of .flipper
    button.href = '#' + d.getElementById('id').id;

    // Add the cross browser event listener
    addEvent('click', button, function() {
        // Send the user to the download link
        w.location = downloadLink;
    });
}(document, window));

// Taken from http://stackoverflow.com/a/6927800/3351720
// This is only to support IE8 and below
function addEvent(evnt, elem, func) {
    if (elem.addEventListener) { // W3C DOM
        elem.addEventListener(evnt, func, false);
    }
    else if (elem.attachEvent) { // IE DOM
        elem.attachEvent('on' + evnt, func);
    }
    else { // Not much to do
        elem[evnt] = func;
    }
}