Flexible Neon Glowing button using only
HTML and CSS.
Here we are creating a button. The specialties of this button is when we hover on it.
It will automatically Increase self width and letter-spacing too. Then it will show glow.
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');
.container{
display: flex;
width: 100vw;
height: 100vh;
background-color: black;
justify-content: center;
align-items: center;
}
.btn{
color: white;
border: 2px solid white;
width:65px;
padding: 10px 10px;
font-family: 'Bebas Neue', cursive;
font-size:20px ;
border-radius: 30px;
text-align: center;
letter-spacing: normal;
cursor: pointer;
transition: all 1s;
}
.btn:hover{
transition: all 1s;
width: 90px;
color: #0bc7e0;
border: 2px solid #0bc7e0;
letter-spacing: normal;
text-shadow: 2px 2px 4px #0bc7e0;
box-shadow: 0px 0px 20px #0bc7e0;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="btn">
Hover Me
</div>
</div>
</body>
</html>
0 Comments