Youtube Subscribe Button HTML CSS JS - Youtube Subscribe Template

HTML (Pug)

.container

a.subscribe-button(data-count='241')

svg(xmlns='http://www.w3.org/2000/svg')

g

rect.plus__line1(width='2' height='12' x='5' y='0')

rect.plus__line2(width='12' height='2' x='0' y='5')

span.subscribe-text Subscribe (code-box)

CSS (SCSS)

body {

font-family: Roboto, Helvetica, Arial, sans-serif;

font-size: 14px;

font-weight: normal;

}

.container {

margin: 140px auto;

width: 200px;

}

.subscribe-button {

$padding: 10px;

$radius: 3px;

$gap: 10px;

$col-info: #e1e1e1;

$col-bg: #e80000;

$col-bg-subbed: #777;

$duration: 0.25s;

position: relative;

padding: $padding 18px;

font-family: inherit;

font-size: inherit;

font-weight: 500;

text-transform: uppercase;

color: white;

background: $col-bg;

border: none;

border-radius: $radius;

cursor: pointer;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);

transition: background, box-shadow;

transition-duration: 0.2s;

&:active {

background: darken($col-bg, 2%);

box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.14);

}

&:after {

content: attr(data-count);

position: absolute;

box-sizing: border-box;

padding: $padding + 2px;

height: 100%;

left: 100%;

top: 0;

margin-left: $gap;

color: $col-bg-subbed;

background: $col-info;

border-radius: $radius;

}

&:before {

$size: 6px;

content: '';

display: block;

position: absolute;

left: 100%;

margin-left: $gap - $size;

top: 50%;

margin-top: -$size;

width: 0;

height: 0;

border: $size solid transparent;

border-left-width: 0;

border-right-color: $col-info;

}

&.subbed {

background: $col-bg-subbed;

svg {

width: 16px;

.plus__line1 {

transform: translate(14px, 0) rotate(45deg) translate(-5px,0) scaleY((14/12));

}

.plus__line2 {

transform: translate(2px, 5px) rotate(45deg) scaleX(0.5) translate(0px, -5px);

}

}

}

svg {

display: inline-block;

width: 12px;

height: 12px;

fill: white;

margin-right: $padding;

transition: width $duration;

.plus__line1,

.plus__line2 {

transition: transform $duration;

}

.plus__line1 {

transform-origin: 0 0; // should be this by default in in FF <= 42 (which doesn't support this on svg)

}

.plus__line2 {

transform-origin: 0 0;

}

}

* {

vertical-align: middle;

}

}(code-box)

JavaScript 

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);

}(code-box)