<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Dogecoin Button ! wow</h1> <div class="btn-dogecoin" data-address="DKVtwbh8YWrXtn5qz8DTB9ZamoYXneKn9F"></div> <div class="btn-dogecoin black donate" data-address="DKVtwbh8YWrXtn5qz8DTB9ZamoYXneKn9F"></div> <h1>much useful, such easy</h1> <p class="wow">This is my actual dogecoin address so you can donate if you want.</p>

@import url(http://fonts.googleapis.com/css?family=Montserrat); .btn-dogecoin { font-size: 14px; white-space: nowrap; position: relative; overflow: hidden; cursor: pointer; font-family: 'Montserrat'; width: 160px; height: 45px; padding: 5px 10px; border-radius: 5px; border: 1px solid #f8e9c0; background-image: -webkit-linear-gradient(#f4ca5d, #f4b840); background-image: linear-gradient(#f4ca5d, #f4b840); color: #333; text-transform: uppercase; -webkit-transition: width .35s ease; transition: width .35s ease; } .btn-dogecoin span { display: block; } .btn-dogecoin .currency { font-size: 1.1em; } .btn-dogecoin .currency:before { content: 'Pay with'; font-size: .65em; display: block; } .btn-dogecoin .symbol { -webkit-transition: all .2s ease; transition: all .2s ease; font-size: 2.3em; border: 2px solid #333; border-radius: 360px; padding: 4px; width: 33px; height: 33px; text-align: center; line-height: 1em; margin-right: 5px; } .btn-dogecoin p { -webkit-transition: all .2s ease; transition: all .2s ease; padding: 0; margin: 0; } .btn-dogecoin .symbol, .btn-dogecoin p { display: inline-block; white-space: nowrap; } .btn-dogecoin:hover p { -webkit-transform: translateX(120px); transform: translateX(120px); } .btn-dogecoin:hover .symbol { -webkit-transform: translateX(60px); transform: translateX(60px); } .btn-dogecoin.opened { width: 390px; } .btn-dogecoin.opened:hover p { -webkit-transform: inherit; transform: inherit; cursor: text; } .btn-dogecoin.opened:hover .symbol { -webkit-transform: inherit; transform: inherit; } .btn-dogecoin.opened .currency { text-transform: initial; } .btn-dogecoin.opened .currency:before { content: 'Thank you !'; text-transform: uppercase; } .btn-dogecoin.donate .currency:before { content: 'Make a donation'; font-size: .65em; display: block; } .btn-dogecoin.donate.opened .currency:before { content: 'wow such generous !'; } .btn-dogecoin.black { color: #fbbc3a; border-color: #323520; background-image: none; background-color: #272515; } .btn-dogecoin.black .symbol { border-color: #fbbc3a; } .btn-dogecoin.black.opened:after { background-color: #272515; border-color: #323520; } p.wow { text-align: center; font-family: 'Comic Sans MS'; } h1 { font-family: 'Comic Sans MS'; font-weight: normal; text-align: center; color: #f43780; } h1:nth-child(1) { color: #00aee6; } .btn-dogecoin { margin: 80px auto; }

$(function(){ var btn = '<div class="symbol">Ð </div><p><span class="currency">Dogecoin</span></p>'; $('.btn-dogecoin').each(function(){ $(this).append(btn); }); $('.btn-dogecoin').click(function(event) { var that = this; $(this).addClass('opened'); $(this).children('p').children('.currency').text($(this).data('address')); $('html').one('click',function() { $(that).removeClass('opened'); $(that).children('p').children('.currency').text('Dogecoin'); }); event.stopPropagation(); }); });