Membuat Custom Button Sendiri Menggunakan CSS

Membuat Custom Button Sendiri Menggunakan CSS

Hallo :v
Sudah sekian lama kagak ngeposting ya 😅
Oke, langsung aja. Kali ini admin bakal share cara membuat button di HTML dengan mengatur CSSnya sendiri (tanpa Bootstrap)

Ini coding dan review hasilnya

See the Pen Cute Button by Mutiara Mahe (@mutiaramahee) on CodePen.

PENJELASAN

Html 

• <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700" rel="stylesheet">  

          = tag untuk memanggil font Raleway secara online dengan mengakses fonts.googleapis.com

• <button>Click Me</button>    

          = tag untuk membuat button dengan value (isi tulisan) "Click Me"

CSS 

•  @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");   

          = untuk mengimport font Raleway secara online dengan mengakses fonts.googleapis.com

• body { ... }  

          = merupakan selector pada CSS untuk memberi properti (pengaturan CSS) pada tag body

• color: white;  

          = color merupakan property pada selector body yang digunakan untuk mengatur warna font (tulisan) ; white merupakan value pada property color (maksudnya nanti tulisan akan berwarna putih)

• background-image: url('...'); : 

          = merupakan property untuk mengatur gambar background

• button { ... } 

          = merupakan selector pada CSS untuk memberi properti (pengaturan CSS) pada tag button

• background:#FF1744;   

          = property untuk mengatur warna background (latar) pada button ; #FF1744 merupakan kode hexadecimal dari warna pink yang digunakan

• border: white 3px solid;    

          = property untuk mengatur border (garis tepi) pada button dengan warna white / putih setebal 3px (3 pixel) dengan tipe garis solid.

• border-radius: 5px;   

          = property untuk mengatur radius dari ujung button (lengkungan ujung tombol)

• padding: 12px 10px;  

          = property untuk mengatur jarak antara tepi button dengan tulisan yang ada di dalam button ; 12px untuk mengatur jarak bagian atas dan bawah ; 10px untuk mengatur jarak bagian samping kanan dan kiri

• cursor: pointer;   

          = property untuk mengatur bentuk cusrsor saat cursor diarahkan ke button dengan value pointer (bentuk tangan / penunjuk)

• button:hover{...}  

          = element hover berguna untuk memberikan tindakan saat button / suau objek HTML ditunjuk oleh cursor (gampangnya, tindakan yang akan dilakukan bila cursor mengarah ke button)

• opacity:0.9; 

          = property untuk mengatur transparansi objek (jadi bila cursor mengenai button, warna button akan berubah dengan transparansi 0.9)


Nah itu adalah penjelasannya, silakan mengeksplor dengan mencoba diotak-atik sendiri scriptnya
dengan mengunjungi Codepen

Gambar 1. Hasil Coding

Ini merupakan contoh script penggunaan CSS yang masih sangat simple sekali 😀
*hehe saking simplenya

Buat kalian yang belum tahu apa itu CSS, apa itu selector... Mungkin admin bakal share tentang CSS.
Ditunggu aja ya!
Atau admin menyarankan untuk kalian mengakses halaman w3schools nih 😆 komplit dah pokoknya

Sekian dan terima kasih 🙊