-->

Cara Membuat Hover Glow Button dengan CSS + Gratis Source Code

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.

Langkah:

1. Persiapkan text editor (notepad, sublime text, dan sebagainya) sebagai media pengetikan syntax nantinya.

Cara Membuat Hover Glow Button dengan CSS + Gratis Source Code


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>

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;
}

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>

 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>

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 :


 
 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Composure

 

Delivered by FeedBurner

-->