CSS Neon Button with Hover effects using Html and CSS : Source Code

Tutorial 3

CSS Neon Button with Hover effects using Html and CSS || Web Tutorials : Source Code

Hey Guys , Welcome To My Blog :- Web Tutorials || Yuvan Art

Full Process To Create Styles Button :-

Click On The Below Link To Watch Full Process To Create CSS Neon Button with hover effects using Html and CSS .

CSS Neon Button effect on hover using HTML & CSS || CSS Glowing button effects || Web Tutorials

Part ( 1 ) HTML Code :-

<!-- CSS Neon Button With Hover Effect - HTML Part -->
<!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>Neon Button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="btn">Button</div>
    </div>
</body>
</html>

Part ( 2 ) CSS Code :-

/* CSS Neon Button With Hover Effect - CSS Part */
body{
    margin: 0;
    padding: 0;
    background-color: black;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn{
    position: relative;
    text-align: center;
    width: 250px;
    padding: 40px;
    color: #15f4ee;
    font-size: 35px;
    font-weight: 400;
    border: 5px solid #15f4ee;
    text-transform: uppercase;
    letter-spacing: 15px;
    cursor: pointer;
    border-radius: 100px;
    transition: 1.5s;
}
.btn:hover{
    box-shadow: 0 5px 40px 0 #15f4ee inset, 0 5px 40px 0 #15f4ee, 0 5px 40px 0 #15f4ee inset, 0 5px 40px 0 #15f4ee;
    text-shadow: 0 0 5px #15f4ee, 0 0 5px #15f4ee;
}