Source code Tombol keren dengan html dan css
Posted by
Membuat button seperti contoh di atas
Untuk membuat nya cukup mudah
Bahan
- Folder kosong
- File index.html
- File style.css
Langsung aja
Pertama buat folder kosong di file penyimpanan
Kedua
Copy SC index.html ini
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="https://wa.me/6285336889508">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button</a>
</body>
</html>
Simpan file html di atas ke folder kosong yg sudah di buat tadi
Ketiga copy SC style.css ini
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: poppins;
}
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;
}
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;
}
Dan simpan juga file CSS di atas ke folder kosong
Dengan file html nya
Lalu liat hasil nya di file index.html
Sekian dulu tutorial dari saya
Newer Posts
Newer Posts
Older Posts
Older Posts
Comments