JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<div id="likeBtn">
    <fb:like href="https://www.facebook.com/Retrogram" width="450"></fb:like>
</div>
<div id="downloadSection" style="display:none;">
<a href="http://example.test/file.zip" class="dFile">Click To Download!</a>

</div>
<div id="fb-root"></div>

CSS

.sTD {
        -moz-box-shadow:inset 0px 5px 14px -7px #276873;
        -webkit-box-shadow:inset 0px 5px 14px -7px #276873;
        box-shadow:inset 0px 5px 14px -7px #276873;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
        background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99', GradientType=0);
        background-color:#599bb3;
        -moz-border-radius:22px;
        -webkit-border-radius:22px;
        border-radius:22px;
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:12px;
        font-weight:bold;
        padding:12px 11px;
        text-decoration:none;
        text-shadow:0px 0px 0px #3d768a;
    }
    .sTD:hover {
        cursor:pointer;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
        background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3', GradientType=0);
        background-color:#408c99;
    }
    .sTD:active {
        position:relative;
        top:1px;
    }
    /* --- Download Button -- */
    .dFile {
        -moz-box-shadow: 0px 10px 14px -7px...

JavaScript

window.fbAsyncInit = function () {

    FB.init({
        appId: '553435274702353',
        status: true,
        xfbml: true,
        logging: true
    });

    FB.Event.subscribe('edge.create', function () {
        $('#likeBtn').fadeOut(function () {
            $('#downloadSection').fadeIn()
        });
    });

};



// Load the SDK
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));