For More Updates you can SUBSCRIBE to our Youtube Channel for FREE! Subscribe Now!

Youtube Subscribe Button HTML CSS JS - Youtube Subscribe Template

0


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

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Help us to Improve our service

Help us to Improve our service

Post a Comment

buttons=(Accept !) days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top