Bootstrap Snippet button subscribe using HTML CSS

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container"><a class="subscribe-button" data-count="241">
    <svg xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect class="plus__line1" width="2" height="12" x="5" y="0"></rect>
        <rect class="plus__line2" width="12" height="2" x="0" y="5"></rect>
      </g>
    </svg><span class="subscribe-text">Subscribe</span></a></div>
    <script>
        var subButton = document.querySelector('.subscribe-button');
var subbedClass = 'subbed';
subButton.addEventListener('click', function(e) {
    toggleSubbed();
    e.preventDefault();
});
function toggleSubbed() {
    var text;
    var count = subButton.dataset.count;
    console.log(count)
         
    if (subButton.classList.contains(subbedClass)) {
        subButton.classList.remove(subbedClass);
        text = 'Subscribe';
        count--;
    } else {
        subButton.classList.add(subbedClass);
        text = 'Subscribed';
        count++;
    }
    
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
body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.container {
  margin: 140px auto;
  width: 200px;
}
.subscribe-button {
  position: relative;
  padding: 10px 18px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  color: white;
  background: #e80000;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: background, box-shadow;
  transition: background, box-shadow;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}
.subscribe-button:active {
  background: #de0000;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.14);
}
.subscribe-button:after {
  content: attr(data-count);
  position: absolute;
  box-sizing: border-box;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"button subscribe"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"button subscribe" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"button subscribe"
Bootstrap 3.0.0 Snippet by evarevirus