JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="share_wrap">
        <h4>Share our website sample text random!</h4>
        <a id="fb_share" href="JavaScript:popup_frame('http://www.facebook.com/share.php?u=http://dvL-den.net')">
            <input type="button" value="Share URL" class="button" id="share" />
        </a>
    </div>
    
    <div class="download_wrap">
        <h4>Share our website to reveal the download!</h4>
        
    </div>
</div>

CSS

/* -------------------------------------------
--> Cascade Style Sheet - CSS by dvL-den <--
------------------------------------------ */
body {
    background: url(http://texturly.com/media/grey_glow2.jpg) top center;
    color: #ccc;
    font: 10pt 'Helvetica', sans-serif;
}

.wrapper {
    width: 400px;
    margin: 20% auto;
    position: relative;
    text-align: center;
}

.button {
	background: rgba(200, 200, 200, .8);
	background: -webkit-linear-gradient(top, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -moz-linear-gradient(top, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -o-linear-gradient(top, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -ms-linear-gradient(top, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: linear-gradient(top, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	border: none;
	color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
	font-size: 8pt;
    font-weight: 600;
	padding: 6px 18px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .3);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .3);
    border-radius: 3px;
    cursor: pointer;
}

.button:hover {
	background: rgba(100, 100, 100, .8);
	background: -webkit-linear-gradient(bottom, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -moz-linear-gradient(bottom, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -o-linear-gradient(bottom, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: -ms-linear-gradient(bottom, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
	background: linear-gradient(bottom, rgba(200, 200, 200, .8), rgba(100, 100, 100, .8));
    color: #444;
}

#download {
    display: none;
}
}

JavaScript

// Swap buttons on click
// -->
$('#share').on('click', function() {
    $('.download_wrap')
        .append('<input type="button" value="Download" class="button" id="download" onClick="alert(\'do something\');" />');
    $('#download').delay(5600).fadeIn();
});
// <--

// New Pop-up Window for Shares
// -->
function popup_frame(url) {
	var width = 450,
		height = 400,
		leftPosition = (window.screen.width / 2) - ((width / 2) + 10),
		topPosition = (window.screen.height / 2) - ((height / 2) + 50);

	popupWindow = window.open(// -->
			url, 'popUpWindow', 
			"height =" + height + ","
		+ 	"width =" + width  + ","
		+	"left =" + leftPosition + ","
		+	"top =" + topPosition + ","
		+	"screenX =" + leftPosition + ","
		+	"screenY =" + topPosition + ","
		+	"resizable = no, status = no, toolbar = no, menubar = no, scrollbars = no, location = no, directories = no"
		// <--
	);
	return false;
}
// <--