Bootstrap Snippet button using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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();
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"button"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"button" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"button"
Bootstrap 3.3.0 Snippet by evarevirus