Halaman

    Social Items


Cara membuat Button Keren Di Blog - Pada kesempatan ini onbloging mau kasih tutorial cara membuat tombol yang keren di blog kamu, tombol ini hanya berbentuk icon, design nya cantik dan elegan loh.

Tombol icon ini bisa kamu gunakan untuk tombol download, demo, ataupun tombol untuk sosial media. Tombol ini hanya menggunakan CSS yah tidak pakai javascript, jadi lebih ringan.

untuk demo silahkan klik tombol di bawah ini


Nah jika kamu ingin menggunakan tombol ini di blog kamu, silahkan kamu ikuti tutorial di bawah ini yah..

Cara membuat Button Keren Di Blog


Tombol ini menggunakan fontawesome, jadi kamu harus memiliki fontawesome di blog kamu, jika belum silahkan salin kode di bawah ini di atas </head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

1. Silahkan log in blogger > tema > edit tema > salin kode di bawah ini tepat di atas </style>
.middle{
  position :absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.btn{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #FFFFF;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: black;
  overflow: hidden;
  position: relative;
}

.btn i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: white;
}

.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #82B1FF;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa{
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%
  }100%{
    left: -10%;
    top: -10%;
  }
}
2. Simpan

PENERAPANNYA

Jika kamu ingin menggunakan sebagai tombol DEMO dan Download

1. Buat postingan > salin kode di bawah ini dan masukan ke dalam mode html yah
<div class="middle">
  <a class="btn" href="#" target="_blank">
    <i class="fas fa-download"></i>
  </a>
  <a class="btn" href="#" target="_blank">
    <i class="fas fa-rocket"></i>
  </a>
2. Publikasikan

Jika kamu ingin menggunakan sebagai tombol media sosial

1. salin kode di bawah ini untuk kamu jadikan widget atau bisa di letakan di bawah postingan kamu
<div class="middle">
<a class="btn" href="#">
    <i class="fab fa-instagram"></i>
  </a>
  <a class="btn" href="#">
    <i class="fab fa-youtube"></i>
  </a>
<a class="btn" href="#">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a class="btn" href="#">
    <i class="fab fa-twitter"></i>
  </a>
  </div>
2. Simpan

Cara membuat Button Keren Di Blog


Cara membuat Button Keren Di Blog - Pada kesempatan ini onbloging mau kasih tutorial cara membuat tombol yang keren di blog kamu, tombol ini hanya berbentuk icon, design nya cantik dan elegan loh.

Tombol icon ini bisa kamu gunakan untuk tombol download, demo, ataupun tombol untuk sosial media. Tombol ini hanya menggunakan CSS yah tidak pakai javascript, jadi lebih ringan.

untuk demo silahkan klik tombol di bawah ini


Nah jika kamu ingin menggunakan tombol ini di blog kamu, silahkan kamu ikuti tutorial di bawah ini yah..

Cara membuat Button Keren Di Blog


Tombol ini menggunakan fontawesome, jadi kamu harus memiliki fontawesome di blog kamu, jika belum silahkan salin kode di bawah ini di atas </head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

1. Silahkan log in blogger > tema > edit tema > salin kode di bawah ini tepat di atas </style>
.middle{
  position :absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.btn{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #FFFFF;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: black;
  overflow: hidden;
  position: relative;
}

.btn i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: white;
}

.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #82B1FF;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa{
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%
  }100%{
    left: -10%;
    top: -10%;
  }
}
2. Simpan

PENERAPANNYA

Jika kamu ingin menggunakan sebagai tombol DEMO dan Download

1. Buat postingan > salin kode di bawah ini dan masukan ke dalam mode html yah
<div class="middle">
  <a class="btn" href="#" target="_blank">
    <i class="fas fa-download"></i>
  </a>
  <a class="btn" href="#" target="_blank">
    <i class="fas fa-rocket"></i>
  </a>
2. Publikasikan

Jika kamu ingin menggunakan sebagai tombol media sosial

1. salin kode di bawah ini untuk kamu jadikan widget atau bisa di letakan di bawah postingan kamu
<div class="middle">
<a class="btn" href="#">
    <i class="fab fa-instagram"></i>
  </a>
  <a class="btn" href="#">
    <i class="fab fa-youtube"></i>
  </a>
<a class="btn" href="#">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a class="btn" href="#">
    <i class="fab fa-twitter"></i>
  </a>
  </div>
2. Simpan

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel