Sebagai salah satu bahasa pemrograman web yang berfokus pada bidang desain, CSS tentu sering digunakan oleh pengembang web. Baik CSS dan anak perusahaan (seperti SCSS, LESS, dan Stylus), dari penggunaannya sendiri, lebih fokus pada tata letak (baik mode bebas dan kisi-kisi) situs web dan pembuatan animasi sederhana.
Dalam membuat animasi sendiri, CSS memiliki struktur dasar yang jelas dan fleksibel (baik dari segi fungsi). Sehingga suatu saat, kita bisa membuat animasi sederhana tanpa perlu menggunakan bantuan bahasa pemrograman seperti Javascript.
Untuk menampilkan aplikasi animasi dalam bahasa pemrograman web, pada artikel ini, kita akan membuat tombol pijar melayang menggunakan bahasa pemrograman CSS.
Untuk menampilkan aplikasi animasi dalam bahasa pemrograman web, pada artikel ini, kita akan membuat tombol pijar melayang menggunakan bahasa pemrograman CSS.
Langkah:
1. Persiapkan text editor (notepad, sublime text, dan sebagainya) sebagai media pengetikan syntax nantinya.
1. Persiapkan text editor (notepad, sublime text, dan sebagainya) sebagai media pengetikan syntax nantinya.
2. Buatlah file yang bernama index.html yang berisikan kode sebagai berikut:
<html>
<head>
<title>Inwepo Hover Glow Logo Button</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
</style>
</head>
<body>
</body>
</html>
<head>
<title>Inwepo Hover Glow Logo Button</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
</style>
</head>
<body>
</body>
</html>
3. Pada bagian <style>, masukkan kode berikut:
body {
margin:0;
padding:0;
background: #262626;
}
h1 {
color: #fff;
font-family: "Segoe UI", sans-serif;
font-size: 45px;
text-align: center;
margin: 95px;
}
i {
margin: 14px;
}
ul {
margin:0;
padding:0;
display:flex;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
ul li {
list-style:none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #171515;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: .5s;
}
ul li a:before {
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background: #999;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover:before {
transform: scale(1.2);
box-shadow: 0 0 15px #999;
filter: blur(3px);
}
ul li a:hover {
color: #fff;
box-shadow: 0 0 15px #999;
text-shadow: 0 0 15px #999;
}
margin:0;
padding:0;
background: #262626;
}
h1 {
color: #fff;
font-family: "Segoe UI", sans-serif;
font-size: 45px;
text-align: center;
margin: 95px;
}
i {
margin: 14px;
}
ul {
margin:0;
padding:0;
display:flex;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
ul li {
list-style:none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #171515;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: .5s;
}
ul li a:before {
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background: #999;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover:before {
transform: scale(1.2);
box-shadow: 0 0 15px #999;
filter: blur(3px);
}
ul li a:hover {
color: #fff;
box-shadow: 0 0 15px #999;
text-shadow: 0 0 15px #999;
}
Nantinya, bagian <style> akan memiliki struktur kode sebagai berikut:
<style>
body {
margin:0;
padding:0;
background: #262626;
}
h1 {
color: #fff;
font-family: "Segoe UI", sans-serif;
font-size: 45px;
text-align: center;
margin: 95px;
}
i {
margin: 14px;
}
ul {
margin:0;
padding:0;
display:flex;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
ul li {
list-style:none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #171515;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: .5s;
}
ul li a:before {
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background: #999;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover:before {
transform: scale(1.2);
box-shadow: 0 0 15px #999;
filter: blur(3px);
}
ul li a:hover {
color: #fff;
box-shadow: 0 0 15px #999;
text-shadow: 0 0 15px #999;
}
</style>
body {
margin:0;
padding:0;
background: #262626;
}
h1 {
color: #fff;
font-family: "Segoe UI", sans-serif;
font-size: 45px;
text-align: center;
margin: 95px;
}
i {
margin: 14px;
}
ul {
margin:0;
padding:0;
display:flex;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
ul li {
list-style:none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #171515;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: .5s;
}
ul li a:before {
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background: #999;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover:before {
transform: scale(1.2);
box-shadow: 0 0 15px #999;
filter: blur(3px);
}
ul li a:hover {
color: #fff;
box-shadow: 0 0 15px #999;
text-shadow: 0 0 15px #999;
}
</style>
4. Pada bagian <body>, masukkan kode berikut:
<div>
<div class="container">
<h1>Inwepo Glow Hover Button</h1>
<ul>
<li><a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
bagian <body> akan memiliki struktur kode sebagai berikut:
<div>
<div class="container">
<h1>Inwepo Glow Hover Button</h1>
<ul>
<li><a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</body>
<div class="container">
<h1>Inwepo Glow Hover Button</h1>
<ul>
<li><a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</body>
5. Save file yang telah dimodifikasi sebelumnya. Lalu, buka file index.html melalui browser kamu. Jika berhasil, akan muncul halaman website dengan konten tulisan serta button (yang menyertakan logo di dalamnya) yang menimbulkan efek glow ketika mouse pengguna berada tepat di atas button yang telah disediakan
Lihat Juga Source Code lainnya dibawah ini :
- 10++ Source Code Project Android Admob 2019 Cuma 200 Ribu dapet Bonus Tools
- Download Script Cheat Mobile Legends Radar Map + Damage 80% Work Mode Anti Banned
- Cara Membuat Aplikasi Android Pencarian Kode POS + Bonus Source Code Project Android
- Source Code Project Android Aplikasi Penjualan Menggunakan Android Studio Siap pakai