Membuat Tombol Custom Di Google Site

Membuat Tombol di google site sangat mudah untuk dilakukan tapi terkadang kita tidak bisa mengatur posisinya agar sesuai yang kita inginkan. dan dalam tutorial ini google site akan membagikan cara membuat tombol yang mudah dan cepat. tapi kelemahan tombol ini adalah setiap teman2 mengklik tombol nanti akan diarahkan di tab baru oleh sebab itu tombol ini sangat berguna untuk membuat tombol ke web eksternal seperti Whatsapp, youtube dan lain sebagainya

silahkan anda masukkan isian ke form sesuai yang anda inginkan

Masukkan Link yang dituju :

Font diisi 2 kali cari di google font
Awali dengan huruf besar :

Warna Background (isikan kode warna(contoh hitam :#000000):

pojok tombol jika ingin setengah lingkaran tulis 20 :

kode Warna Font (contoh putih : #ffffff) :

besar font contoh : 18 :

Letak tombol (kanan=right tengah=center kiri=left) :

padding atas & bawah tombol contoh=12 :

padding samping tombol contoh=16 :

Teks Tombol :

ganti icon dengan nama medsos atau cek di font awesome link di paling bawah, Contoh : fa fa-whatsapp

Setelah memasukkan Kode silahkan klik Generate, Copy Semua Code jika telah di generatedan reset kode bisa ingin memasukkan kode atau salah memasukkan kode



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=micro">
<style>
.btn {
  background-color: micro;
  border: none;
  color: micro;
  padding: micropx micropx;
  font-size: micropx;
  cursor: pointer;
  border-radius: micropx;
  font-family: micro;

}


/* Darker background on mouse-over */
.btn:hover {
  opacity: 0.7;
}
</style>
</head>
<body>


<div align="micro">
<a href="micro"><button class="btn"><i class="micro"></i>  micro</button>
</div>

</body>
</html>

silahkan kunjungi link dibawah ini untuk menganti icon dari tombol
https://fontawesome.com/v4.7/icons/

Terima Kasih semoga bermanfaat

Mudah Buat Website

Membuat Tombol Custom Di Google Site

Related Posts

Posting Komentar

Posting Komentar

Popular

Label

Arsip

Kontributor