Advertisement

Neon Light CSS Animation Button Source Code Free : In this article, you’ll find an HTML CSS JavaScript project that you can use for practice. In this you will get to see different elements like hover effect, box-shadow, drop shadow. With which you can create a good professional website of your own. If you want to use it for a college project then you can do that too.

Neon light hover button
Advertisement

Neon Light Html Animation Code

<body>
    <section >
        <div class="btn b1"><a href="">Hover Effect</a></div>
        <div class="btn b2"><a href="">Hover Effect</a></div>
        <div class="btn b3"><a href="">Hover Effect</a></div>
        <div class="btn b4"><a href="">Hover Effect</a></div>
    </section>
</body>
Advertisement

Box Card CSS Code

 <style>
        section{
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background:#000000;
}
.btn a{
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    margin: 20px;
}
.b2 a{
    background-image: linear-gradient(to left, #52acff 0%, #85fd9f 40%, #52acff 90%);
} 
.b2 a:hover{
    transition: all 0.2s ease;
    background-image: linear-gradient(to right, #52acff 0%, #85fd9f 10%, #52acff 51%);
    box-shadow:0px 0px 30px rgb(0, 174, 255);
}
.b3 a{
    background-image: linear-gradient(to right, #69ff64 0%, #ffe364 51%, #69ff64 100%);
}
.b3 a:hover{
    transition: all 0.2s ease;
    background-image: linear-gradient(to right, #ecf665 10%, #ecf665 10%, #70fd57 50%);
    box-shadow:0px 0px 30px rgb(72, 255, 0);
}
.b4 a{
    background-image: linear-gradient(to right, #ff64ff 0%, #fd8985 51%, #ed64ff 100%);
}
.b4 a:hover{
    transition: all 0.2s ease;
    background-image: linear-gradient(to right, #ed64ff 0%, #ed64ff 10%, #f66589 50%);
    box-shadow:0px 0px 30px rgb(255, 0, 234);
}
.b1 a{
    background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
.b1 a:hover{
    transition: all 0.2s ease;
    background-image: linear-gradient(to right, #f6d365 15%, #f6d365 10%, #fda085 51%);
    box-shadow:0px 0px 30px rgb(255, 166, 0);
}



    </style>

In this, you will get to see a professional and responsive mobile friendly design made with the help of HTML and CSS, which you can copy for free from here.

Advertisement

Box Card Java Script Code

Advertisement
car game code

Game Source Code Download

Advertisement