Tombol Neon HTML dan CSS

0
57
Tombol Neon

Tombol Neon

Button menjadi salah satu elemen penting dalam web desain. Kali ini saya akan menunjukan cara membuat tombol neon dengan html dan css. Berikut tutorialnya.

 

Persiapan

Buatlah folder dengan nama Tombol neon, atau terserah anda. Kemudian dalam folder tersebut kita buat file dengan nama index.html dan style.css

 

Pengerjaan

Pada file index.html, isilah koding dibawah ini

<!DOCTYPE html>
<html>
   <head>
       <title>Tombol Neon</title>
       <link rel="stylesheet" href="style.css">
   </head>
   <body>
       <a href="#">
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           Tombol Neon
       </a>
   </body>
</html>

Lalu tampilannya pada browser akan terlihat seperti pada di bawah

Html

Kemudian pada file style.css, isi dengan kodingan di bawah ini

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #100318;
    font-family: Arial, Helvetica, sans-serif;
}
a{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #410082;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    transition: .2s;
}
a:hover{
    color: #100318;
    background: #410082;
    box-shadow: 0 0 10px #410082, 0 0 40px #410082, 0 0 80px #410082;
    transition-delay: .9s;
}
a span{
    position: absolute;
    display: block;
}
a span:nth-child(1){
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#410082);
}
a:hover span:nth-child(1){
    left: 100%;
    transition: .8s;
}
a span:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100px;
    height: 2px;
    background: linear-gradient(270deg,transparent,#410082);
}
a:hover span:nth-child(3){
    right: 100%;
    transition: .8s;
    transition-delay: .4s;
}
a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#410082);
}
a:hover span:nth-child(2){
    top: 100%;
    transition: .8s;
    transition-delay: .2s;
}
a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#410082);
}
a:hover span:nth-child(4){
    bottom: 100%;
    transition: .8s;
    transition-delay: .7s;
}

Lalu tampilannya akan seperti dibawah ini

complete

Lalu cobalah untuk hover pada tombol tersebut dan lihatlah apa yang terjadi.

Kamu juga bisa mengganti warnanya sesuai dengan apa yang kamu inginkan.

Sekian tutorial kali ini, semoga bisa bermanfaat bagi kita semua.

Terimakasih…

LEAVE A REPLY

Please enter your comment!
Please enter your name here