Dalam tutorial kali ini saya akan membagikan cara membuat tombol dengan efek neon ketika di hover menggunakan HTML5 dan CSS3
Jika kamu seorang front-end atau baru mau belajar, efek yang akan kita buat ini berfungsi untuk memberikan kesan hidup pada tombol. Sehingga ketika user melakukan interaksi berupa pengerahan kursor mouse nya ke tombol, maka tombol tersebut akan memberikan efek neon.
Contoh efek neon button
Alat yang diperlukan
- Text Editor (untuk menulis programnya)
- Browser (untuk melihat hasilnya)
Saya kali ini menggunakan text editor visual studio code. Jika kamu menggunakan text editor yang lainnya seperter sublime, notepad, atom, atau apapun itu, tidak masalah. Karena fokus kita pada pembahasan kali ini adalah pada bagaimana kita bisa membuat neon button nya.
Oke langsung saja masuk ke tutorialnya.
Cara Membuat Neon Button dengan HTML + CSS
1. Membuat folder
Langkah pertama yang harus kita lakukan adalah membuat folder. Nanti di folder inilah kita bisa menyimpan file index.html dan style.css nya.
Untuk nama foldernya terserah, misalnya di sini saya membuat folder dengan nama “Neon Button”
2. Membuat file index.html dan style.css
Setelah folder Neon Button berhasil kita buat, sekarang silahkan buka folder tersebut di text editor kalian.
Apabila telah terbuka, silahkan buat file index.html dan style.css
Jika kamu menggunakan visual studio code, kamu tinggal klik icon “New File” kemudian tuliskan nama file yang ingin kamu buat.
Atau cara lainnya, kamu bisa langsung membuka folder tersebut, dan buat secara manual file nya. Sehingga kamu tinggal klik kanan > New Folder > Buat Nama > Enter
3. Membuat kerangka html untuk neon button
Selanjutnya kita akan mulai menulis programnya. Pertama-tama, buatlah kerangka HTML dasar. Setelah itu pada bagian body, buatlah link.
Untuk url link nya isi kan “#” dan untuk namanya terserah. Misal dalam tutorial kali ini saya membayangkan sedang membuat website fantasi, di mana dalam website tersebut berisi konten yang akan mengajak user berpetualang di dalam dunia fantasi. Oleh sebab itulah saya akn membuat tombolnya dengan kata “Explore”
<a href="#">Explore</a>
Selanjutnya, kita akan memasukan 4 tag span di dalam link tersebut.
Mengapa harus 4?
Span merupakan tag html yang berfungsi untuk mengelompokan beberapa element. Sehingga memudahkan kita pada proses pembajuan pada style.css
Jika teman-teman bingung, silahkan salin kode berikut ke text editor kalian.
<!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>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button</a>
</body>
</html>Sekian untuk artikel Cara Membuat Button Efek Animasi Neon Dengan HTML dan CSS. Semoga bermanfaat
4. Menghubungkan HTML dengan CSS
Sebelum kita mulai mengolah file css, kita akan menghubungkan html dan css nya terlebih dahulu.
Caranya cukup mudah, teman-teman cukup menambahkan kode ini tepat di bawah ‘title’
<link rel="stylesheet" type="text/css" href="style.css">
5. Bajui HTML kamu dengan CSS
Setelah membuat kerangka HTML dengan link untuk tombol nanti, barulah saatnya kita mulai mendesign atau membajui HTML kita dengan css.
Dalam membuat neon button kali ini, kita hanya perlu mendesign 3 elemen. Yaitu code ‘body’, ‘a’, dan ‘a ketika di hover’
Buka file style.css yang telah kita buat. Kemudian mari kita design terlebih dahulu bagian ‘body’ atau tubuh dari kerangka HTML kita.
Pada file style.css silahkan copy kode berikut
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: poppins;
}Karena pada tutorial kali ini kita hendak meletakan tombolnya di tengah-tengah, maka margin dan padding nya kita buat 0. Terlepas dari itu, pada justify-content kita buat jadi center.
Kemudian, apa maksud dari flex?
Flex yang merupakan isian dari display mengartikan bahwa kita ingin tombol tampil secara flexsibel, atau menyesuaikan dengan layar dari user.
Hal ini sangat penting untuk memaksimalkan kenyamanan user kita nanti.
Untuk bagian background dan font-family itu optional ya
Setelah membuat css bagian body, kemudian kita akan membuat bagian ‘a’
‘a’ di sini merupakan kode untuk link button yang tadi kita buat, jadi setelah membajui body, barulah kita otak-atik bagian button nya.
a{
border-radius: 1px solid #000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}Sebenarnya pada bagian ini sudah cukup jelas, semuanya bersifat optional. Untuk warna dan ukuran font itu terserah kalian.
Hanya saja pada relative yang merupakan isian dari posisiton itu mengartikan bahwa memungkinkan tombol dapat berinteraksi dengan alur elemen ‘div’
Sedangkan uppercase sendiri, agar font tampil dengan huruf besar.
Apabila ‘a’ sudah, selanjutnya kita akan membuat css ‘a:hover’
Maksud bagian ini adalah, apa yang akan terjadi pada css, ketika cursor di arahkan ke button.
Pada bagian inilah inti dari efek neon yang akan kita buat.
a:hover{
border-radius: 1px solid #000;
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80 #2196f3;
transition-delay: 0.5s;
}Untuk bagian a:hover juga bersifat optional. Jadi teman-teman bisa mengatur sendiri sesuka hati kalian.
Hasil akhir file style.css
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
a{
border-radius: 1px solid #000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover{
border-radius: 1px solid #000;
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80 #2196f3;
transition-delay: 0.5s;
}Sebenarnya batas sana saja kita sudah selesai. Namun buat teman-teman yang ingin memberkian efek perjalanan garis seperti contoh di atas, teman-teman cukup tambahkan code css nya seperti berikut :
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: Arial, Helvetica, sans-serif;
}
a{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform : uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover{
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}
a span{
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3) {
left: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#2196f3);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}Bagaimana mudah sekali bukan? sekian untuk Cara Membuat Button Efek Animasi Neon Dengan HTML dan CSS. Semoga bermanfaat!
Terima kasih