<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++;
}
subButton.querySelector('.subscribe-text').innerHTML = text;
subButton.dataset.count = count;
}
if ('alert' == '') {
window.setInterval(toggleSubbed, 1000);
}
</script>
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;
padding: 12px;
height: 100%;
left: 100%;
top: 0;
margin-left: 10px;
color: #777;
background: #e1e1e1;
border-radius: 3px;
}
.subscribe-button:before {
content: '';
display: block;
position: absolute;
left: 100%;
margin-left: 4px;
top: 50%;
margin-top: -6px;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-width: 0;
border-right-color: #e1e1e1;
}
.subscribe-button.subbed {
background: #777;
}
.subscribe-button.subbed svg {
width: 16px;
}
.subscribe-button.subbed svg .plus__line1 {
-webkit-transform: translate(14px, 0) rotate(45deg) translate(-5px, 0) scaleY(1.16667);
transform: translate(14px, 0) rotate(45deg) translate(-5px, 0) scaleY(1.16667);
}
.subscribe-button.subbed svg .plus__line2 {
-webkit-transform: translate(2px, 5px) rotate(45deg) scaleX(0.5) translate(0px, -5px);
transform: translate(2px, 5px) rotate(45deg) scaleX(0.5) translate(0px, -5px);
}
.subscribe-button svg {
display: inline-block;
width: 12px;
height: 12px;
fill: white;
margin-right: 10px;
-webkit-transition: width 0.25s;
transition: width 0.25s;
}
.subscribe-button svg .plus__line1,
.subscribe-button svg .plus__line2 {
-webkit-transition: -webkit-transform 0.25s;
transition: -webkit-transform 0.25s;
transition: transform 0.25s;
transition: transform 0.25s, -webkit-transform 0.25s;
}
.subscribe-button svg .plus__line1 {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.subscribe-button svg .plus__line2 {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.subscribe-button * {
vertical-align: middle;
}
