Membuat Button Glowing Dengan HTML & CSS - Razzer Hacker
Jumat, 25 September 2020
Tambah Komentar
Hai sob kalian pernah kan melihat tombol? tombol untuk download, link, dll pasti pernah.. tapi tombol itu bisa saja tidak bagus atau pun sederhana yang hanya di buat tanpa ada nya CSS.
Nah disini saya akan membagikan sedikit materi yang mengenai Button.
Buat lah sebuah Link atau Button.
<span></span>
<a href="#">Razzer Hacker</a>
Menambahkan Style ke Button atau Link.
Maka kalian harus menentukan tampilan tombol dengan bantuan properti CSS:
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d1f21;
font-family: Consolas;
}
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;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3 ,0 0 80px #2196f3;
transition-delay: 0s;
}
a span{
position:absolute;
display: block;
}
a span:nth-child(1)
{
top: 0;
left: -100%;8
width: 100%;
height: 2px;
background:yellow linear-gradient(90deg,transprarent);
}
a:hover span:nth-child(1)
{
left: 100%;
transition: 1s;
}
a span:nth-child(3)
{
bottom: ;: 0;
right: -100%;
width: 100%;
height: 2px;
background:yellwo linear-gradient(270deg,transprarent);
}
a:hover span:nth-child(3)
{
left: 100%;
transition: 1s;
}
Penjelasan.
• Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML.
• Yang dimaksud nth-child adalah selector yang digunakan untuk memberikan property pada tag atau class yang yang ada pada urutan tertentu.
Jika anda ingin melihat langsung maka lihat lah di bawah ini.
See the Pen Button Glowing HTML & CSS. by Muhammad (@RidwanGans) on CodePen.
Belum ada Komentar untuk "Membuat Button Glowing Dengan HTML & CSS - Razzer Hacker"
Posting Komentar