HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>Neon Button</title>
</head>
<body>
<divclass="left-sidebar">
<divclass="logo">
<img src="img/logo.png" />
<a href="#">BrodSchool</a>
<a href="#"class="neon-btn2" >Hover ame</a>
</div>
<divclass="sidebar">
<divclass="items">
<i class="ri-home-4-line" ></i>
<h3>Dashboard</h3>
</div>
<divclass="items">
<i class="ri-user-6-line" ></i>
<h3>My Chanel</h3>
</div>
<divclass="items">
<i class="ri-history-line" ></i>
<h3>History</h3>
</div>
<divclass="items">
<i class="ri-movie-2-line" ></i>
<h3>Popular</h3>
</div>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body{
background: #000 ;
height: 100vh ;
width: 100vh ;
display: flex ;
align-items : center ;
justify-content : center
}
container {
flex-direction : column ;
display : flex ;
gap : 60px ;
}
neon-btn1 {
font-size :24px ;
position :relative ;
color :#2e294c ;
display :inline-block ;
text-direction :none ;
font-weight :600 ;
overflow :hidden ;
transition :0.2s ;
border-radius :12px ;
padding :15px 25px ;
}
neon-btn2 {
font-size :24px ;
position :relative ;
color :#2e294c ;
display :inline-block ;
text-direction :none ;
font-weight :600 ;
overflow :hidden ;
transition :0.2s ;
border-radius :12px ;
padding :15px 25px ;
}
neon-btn1:hover {
background :#e318f0 ;
color :#042644 ;
box-shadow :0 0 10px #e318f0,
0 0 40px #e318f0,
0 0 80px #e318f0; ;
}
neon-btn2:hover {
background :#e318f0 ;
color :#042644 ;
box-shadow :0 0 10px #e512f7,
0 0 40px #e512f7,
0 0 80px #e512f7; ;
}
