1

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

user2693017
  • 1,750
  • 6
  • 24
  • 50

2 Answers2

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.

Ex-iT
  • 1,479
  • 2
  • 12
  • 20
  • ok, mhh I thought it would work without js. I would like to use this technic as a download button. – user2693017 Apr 05 '14 at 12:11
  • 1
    With just a little bit of JavaScript you can make that work. Do you want an example? – Ex-iT Apr 05 '14 at 12:13
  • would be great. Is there also something I could do for people with js disabled`? – user2693017 Apr 05 '14 at 12:47
  • @user2693017 I've updated my answer with the JavaScript (and HTML). If this to your satisfaction please mark it as resolved. – Ex-iT Apr 05 '14 at 16:13
  • thanks @Ex-iT I will test it as soon as I get to it. :) – user2693017 Apr 06 '14 at 14:32
  • hey, I just tested it and it works great with only one problem which is related to the button. If you use this on a page where you can scroll down the screen jumps to the button (anchor). Is it possible to prevent this with js or to set the clicked status different? Thanks for your help so far. :) – user2693017 Apr 06 '14 at 14:50
  • I don't think you can, because if you prevent the default behaviour the `thank you`-side won't show up. Changing this behaviour would require more JavaScript and would almost mean changing all the logic of how the button now works, sorry :) – Ex-iT Apr 06 '14 at 15:50
0

altough a href attribute will work on a element only you may add a click event to any element to call a url

or you can wrap a span with an a

Artur Stary
  • 724
  • 2
  • 13
  • 30