Custom Youtube subscribe Button
Here we are customizing youtube subscribe button using only Css and some Html.
Basically we are giving it new look with css hover effect .It is just for fun when you reload
the page then it will go to the default look so let's do this.
How to:
first of all go to the chrome browser and press "F12" key.
now developer tool has opened, you can see many options like elements, console, sources
etc. at the top of the developer tool ignore all of them just click on "Elements" option.
you can see here is showing all of the code of this page.
at the top of developer tool have a cursor option select to it, then click on subscribe button.
great now you are seeing coding of subscribe button . press right click and click an option
"edit as html" and delete the code then paste this code:
<div class="container">
<div class="btn">
<span class="left"></span>
<span class="right"></span>
<span class="text">
SUBSCRIBE
</span>
</div>
</div>
now move to the top and edit Head tag and paste this code into it :
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
border-radius: 10px;
width: 150px;
height: 43px;
cursor: pointer;
}
.btn{
display: flex;
justify-content: center;
background-color: black;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
width:110px;
text-align: center;
}
.left{
display: block;
background-color: white;
width:3px;
transition: all 1s;
}
.btn:hover .left{
background-color: red;
}
.right{
width: 3px;
background-color: white;
transform: translateX(-3px);
transition: all 1s;
}
.btn:hover .right{
background-color: red;
transform: translateX(105px);
}
.btn:hover .text{
color: red;
transition: color 1s;
}
</style>
great now our work has done.
hover on subscribe button and see magic.
watch video :
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>custom subscribe button</title>
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
border-radius: 10px;
width: 150px;
height: 43px;
cursor: pointer;
}
.btn{
display: flex;
justify-content: center;
background-color: black;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
width:110px;
text-align: center;
}
.left{
display: block;
background-color: white;
width:3px;
transition: all 1s;
}
.btn:hover .left{
background-color: red;
}
.right{
width: 3px;
background-color: white;
transform: translateX(-3px);
transition: all 1s;
}
.btn:hover .right{
background-color: red;
transform: translateX(105px);
}
.btn:hover .text{
color: red;
transition: color 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="btn">
<span class="left"></span>
<span class="right"></span>
<span class="text">
SUBSCRIBE
</span>
</div>
</div>
</body>
</html>
download source code
0 Comments