Social Fly-out Drawer dengan css

Terkadang kebutuhan link ke Sosmed dibutuhkan dalam website, ini berfungsi untuk memudahkan visitor mengenali pemilik website tersebut.

Kali ini Saya ingin berbagi dengan Anda, yaitu sebuah tombol link ke social media dengan gaya Fly-out drawer menggunakan css.

Anda tertarik membuatnya ? Silahkan copy code dibawah untuk menempatkan Social Fly-out Drawer dengan css di website Anda.

Script Social Fly-out

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>CSS Social Fly-out Drawer</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  
<!-- Use Font awesome from external link -->

  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- begin CSS code -->

<style>
body,
ul {
  margin: 0;
  padding: 0;
}
body { 
  background: navy;
  color: white;  
}
.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  padding: .4em 0;
  background: #7D294E
  color: white;
  text-align: center;
  font-size: 0;
}
.main { 
  position: fixed; 
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: verdana;
  font-size: 150%;  
  border: none;
}
.drawer li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.drawer a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: 0;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.drawer a:active,
.drawer a:focus { background: #B44659; }
.drawer i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.drawer span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.drawer li:hover ul {
  transform: translateX(0);
  background: #B44659;
}
.drawer > li { display: block; }
.drawer > li > a { background: #7D294E; }
.drawer > li:hover { z-index: 100; }
.drawer > li:hover a { background: #B44659; }
.drawer > li a:hover { background: #F56356; }
.drawer > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=1 );
  transition: opacity 0.5s;
}
.drawer > li:hover a:after { opacity: 1; }
.drawer > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.5s transform;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<ul class="drawer">
  <li> <a href="#"> <i class="fa fa-share-alt"></i> <span>Social</span> </a>
    <ul>
      <li> <a href="#"> <i class="fa fa-facebook"></i> <span>Facebook</span> </a> </li>
      <li> <a href="#"> <i class="fa fa-twitter"></i> <span>Twitter</span> </a> </li>
      <li> <a href="#"> <i class="fa fa-google-plus"></i> <span>Google+</span> </a> </li>
      <li> <a href="#"> <i class="fa fa-pinterest"></i> <span>Pinterest</span> </a> </li>
    </ul>
  </li>
</ul>

<div class="main">
  <h1>CSS Social Fly-out Drawer</h1>
</div>

<!-- End of body content -->

</body>
</html>

Script diatas menggunakan Font-awesome dari external link, link sesuai dengan nomor yang di highlight di form script diatas.

Untuk melihat demo script diatas, atau ingin mengeditnya, silahkan Anda gunakan halaman yang Saya sediakan yaitu halaman Realtime HTML Editor ↗

Semoga bermanfaat, sampai jumpa di ulasan berikutnya, dan salam sukses selalu untuk Anda semua.

Mungkin Anda Menyukai