Home programming HTML CSS: Cara Membuat Button Dengan Animasi Loading

HTML CSS: Cara Membuat Button Dengan Animasi Loading

Cara membuat tombol loading di HTML CSS sangat mudah! 3 Step saja...


cara membuat button menggunakan html css dengan animasi loading


Untuk melihat hasil nyatanya, silahkan klik tombol "Look it".



Berikut ini tutorial cara membuat button menggunakan HTML dan CSS dengan animasi loading:

1. Tambahkan Code Font Awesome

<link rel="stylesheet">
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Sisipkan kode tersebut ke dalam kode

<head> -----SISIPKAN DISINI----- </head>

Sehingga urutannya seperti ini:

<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
</html>

2. Tambahkan Tag Button

<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>Button HTML Animasi
</button>

Sisipkan kode tersebut di bagian

<body> ------SISIPKAN DISINI------</body>

sehingga menjadi seperti ini:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>Tombol LPKIA ORG
</button>

</body>

</html>

3. Tambahkan Style / Code CSS

Tahap terakhir adalah menambahkan kode CSS ke dalam htmlnya langsung secara internal.

.buttonload {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px
}

Contohnya seperti ini:

<html>
<style>
---sisipkan kode CSS disini---
</style>
<head>
---isi dengan font awesome tadi---
</head>
<body>
---isi dengan kode button tadi---
</body>
</html>


Keterangan:
  • Background-color: untuk merubah warna button, bisa di ganti dengan warna apa saja (hexa, normal)
  • border: untuk menghilangkan garis-garis pinggiran button
  • color: supaya huruf di dalam button menjadi berwarna (secara default warnanya adalah hitam)
  • padding: untuk memberikan jarak antara isi / konten dengan border
  • font-size: untuk memberikan ukuran besar kecilnya huruf

Cek hasilnya disini:


Itulah 3 Step cara membuat tombol atau button animasi loading di HTML CSS. Semoga bermanfaat, kalau ente berhasil silahkan share artikel tutorial ini. jangan lupa cek hasilnya disini>>