Button Download

by Maz Soma

HTML

<div class="download-box">
<div class="TombolOK">Click Here</div>
    <div class="thanks-box">
        Terima Kasih sudah mendownload di situs kami.<br/>
        Untuk mendownload silahkan klik link di bawah ini:
        <div class="thanks-link">
        <a href="" target="_blank" title="Link Download">Link Download</a></div>
        Jangan lupa bagikan ini:<br/>
        <div class="share-link">
        <div style='margin-right:20px;margin-top:-2px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
        </div>
        <div class='close-thanks' title='Close'>&#10006;</div>
        </div>
    </div>

CSS

.download-box{
    width:400px;
    height:200px;
    position:relative;
    margin:0 auto;
    padding:0;
}
.TombolOK {
	box-shadow: 3px 4px 0px 0px #1564ad;	
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:5px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:17px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
    position:absolute;
    top:33%;
    left:33%;
}
.TombolOK:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.TombolOK:active {
    box-shadow: 1px 1px 0px 0px #1564ad;
	position:relative;
	top:33.5%;
    left:33.5%;
}
.thanks-box{
    position:absolute;
    top:0;
    left:0;
    width:360px;
    height:160px;
    margin:0 auto;
    padding:20px;
    background:#fff;
    border:1px solid #ddd;
    color:#333;
    font-size:14px;
    text-align:center;
    line-height: 1.6em;
    box-shadow: 3px 3px 5px 0px #ddd;
    display:none;
}
.thanks-link a{
    font-size:16px;
    font-weight:700;
    color:red;
    line-height: 3em;
}
.close-thanks{
    position:absolute;
    font-size:18px;
    color:#333;
    width:45px;
    text-align:center;
    top:0;
    right:-12px;
    padding:0;
    cursor:pointer
}
.close-thanks:hover{
    color:red;
}
.share-link{
    margin:10px auto 0;
    display:inline-block;
}

JavaScript

$(function() {  
    $('.TombolOK').click(function () {
    $('.thanks-box').fadeIn()
});
    $('.close-thanks').click(function() {
    $('.thanks-box').slideUp()
});
 });

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

 (function() {
 var po = document.createElement('script');          
     po.type = 'text/javascript';          
     po.async = true;          
     po.src = 'https://apis.google.com/js/plusone.js';          
     var s = document.getElementsByTagName('script')[0];          s.parentNode.insertBefore(po, s);        
 })();

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");