CSS underline Button
Here we are creating a button. The specialties of this button is when we hover on it.
It will linearly change the its color and show bar under the button too.
Like this:
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>Button</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
:root{
--red:#ff0000;
--green:#00ff55;
--blue:#ff00d4;
}
.container{
display: flex;
flex-direction: column;
width:100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
.btn{
color: white;
width: 100px;
font-family: "Bebas Neue";
letter-spacing: normal;
font-size: 30px;
text-align: center;
cursor: pointer;
transition: all 1s;
}
.btn:hover{
text-shadow: 0px 0px 5px var(--red);
}
.line{
width:0px;
height:4px;
background-color: white;
transition: all 1s;
}
.btn:hover .line{
width:100%;
height: 4px;
background-color: var(--red);
box-shadow: 0px 0px 6px var(--red);
}
.btn2{
color: white;
width: 100px;
font-family: "Bebas Neue";
letter-spacing: normal;
font-size: 30px;
text-align: center;
cursor: pointer;
transition: all 1s;
}
.btn2:hover{
text-shadow: 0px 0px 5px var(--green);
}
.line2{
width:0px;
height:4px;
background-color: white;
transition: all 1s;
}
.btn2:hover .line2{
width:100%;
height: 4px;
background-color: var(--green);
box-shadow: 0px 0px 6px var(--green);
}
.btn3{
color: white;
width: 100px;
font-family: "Bebas Neue";
letter-spacing: normal;
font-size: 30px;
text-align: center;
cursor: pointer;
transition: all 1s;
}
.btn3:hover{
text-shadow: 0px 0px 5px var(--blue);
}
.line3{
width:0px;
height:4px;
background-color: white;
transition: all 1s;
}
.btn3:hover .line3{
width:100%;
height: 4px;
background-color: var(--blue);
box-shadow: 0px 0px 6px var(--blue);
}
</style>
</head>
<body>
<div class="container">
<div class="btn">
Hover me
<div class="line"></div>
</div>
<br>
<div class="btn2">
hover me
<div class="line2"></div>
</div>
<br>
<div class="btn3">
hover me
<div class="line3"></div>
</div>
</div>
</body>
</html>
0 Comments