Cara Membuat Tombol 3D dengan HTML dan CSS

Sebagai seorang Web Design tentu harus menemukan trik atau cara yang berbeda dalam membuat sebuah tampilan suatu website,pada kesempatan sebelumnya sudah membahas bagaimana cara membuat tombol 3D dengan HTML & CSS ,dan kali ini saya ingin berbagi tentang cara yang berbeda dengan sebelumnya.Baiklah agar tidak terlalu lama mari kita mulai saja ,pertama buka text editor kalian lalu ketik kode html dan simpan file HTML terlebih dahulu, seperti gambar dibawah ini,

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tombol 3D</title>
  <link rel="stylesheet" type="text/css"
  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
  <div class="container">
  <ul>
    <li>
      <a href="">
        <i class="fa fa-thumbs-up"></i>
        <span>- Like</span>
      </a>
    </li>
    <li>
      <a href="">
        <i class="fa fa-heart"></i>
        <span> - Subcribe</span>
      </a>
    </li>
  </ul>
  </div>
</body>
</html>

selanjutnya kita membuat file CSS ketikan seperti dibawah ini, dan simpan file beri nama style.css

style.css

 *{
      margin:0;
      padding:0;
    }
    body{
      background: #a3d5d3;
      font-family: sans-serif;
    }
    ul{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50, -50);
      display: flex;
      margin:0;
      padding:0;
    }
    ul li{
      list-style: none;
      margin:0 5px;
    }
    ul li a .fa{
      font-size: 40px;
      color:#333;
      line-height: 80px;
      transition: 0.5s;
      padding-right:14px;
    }
    ul li a span{
      padding:0;
      margin:0;
      position: absolute;
      top:30px;
      color:#333;
      letter-spacing:4px;
      transition: 0.5s;
    }
    ul li a{
      text-decoration: none;
      display: absolute;
      display: block;
      width: 210px;
      height: 80px;
      background: #fff;
      text-align: left;
      padding-left:20px;
      transform: rotate(-30deg) skewX(25deg) translate(0);
      transition: 0.5s;
      box-shadow: -20px 20px 10px rgba(0,0,0,0.5);
    }
    ul li a:before{
      content:'';
      position:absolute;
      top:10px;
      left:-20px;
      height: 100%;
      width: 20px;
      background: #b1b1b1;
      transform: 0.5s;
      transform: rotate(0deg) skewY(-45deg);
    }
    ul li a:after{
      content:'';
      position:absolute;
      bottom:-20px;
      left:-10px;
      height: 20px;
      width: 100%;
      background: #b1b1b1;
      transform: 0.5s;
      transform: rotate(0deg) skewX(-45deg);
    }
    ul li a:hover{
      transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
      box-shadow: -50px 50px 50px rgba(0,0,0,0.5);
    }
    ul li:hover .fa{
      color: #fff;
    }
    ul li:hover span{
      color: #fff;
    }
    ul li:hover a{
      background: #dd4b39;
    }
    ul li:hover a:before{
      background: #b33a2b;
    }
    ul li:hover a:after{
      background: #cc4b39;
    }

Selanjutnya bisa dijalankan pada browser kalian ,lalu lihat hasilnya sebagai berikut.

Sekian pembahasan pada kesempatan kali ini tentang Cara Membuat Tombol 3D Dengan HTML & CSS ,semoga bermanfaat… happy coding.