CSS Button two links

Question

I found this nice looking button on the web. Now I was wondering is it even possible to link something with it? The <a href""> is needed for the status of the button and the second href indside of the div doesn't work. Did the creator make a small mistake or would a button like this never work?

http://codepen.io/seansean11/pen/wHIae

Answer 1

I think the point of this button is to send something (probably a form) with AJAX and then show the thank you-side.

If you use it with a href to another page you will not see the thank you-side as you are leaving the page.

The href on the div will never work without some JavaScript. The button effect works without JavaScript but is kind of pointless on it's own.

Updated with example to use it as download link

In order to make the button work for non-JS users you should set the href to the file you want them to download. For non-JS users it doesn't show the thank you-side unfortunately. I also added an ID (#btn-download) to the button to make it easy to get it in the 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>

JavaScript

(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;
    }
}

I haven't tested it in various browsers but I think it should work in all modern browsers (Chrome, Firefox, Opera and Safari) and Internet Explorer to atleast version 7.