Cara Membuat Button Keren dengan HTML dan CSS

By Posted on

Cara Membuat Button Keren dengan HTML dan CSS – Dalam dunia pengembangan web, button memiliki peran yang sangat penting dalam meningkatkan interaksi pengguna dan estetika desain. Apakah Anda seorang pemula yang ingin belajar cara membuat button yang menarik dan keren menggunakan HTML dan CSS? Pada artikel ini kelashtml akan membantu Anda memahami langkah-langkahnya dengan mudah!

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat button keren dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Cara Membuat Web Berita dengan HTML dan CSS

1. Buat Folder Project “Button Keren”

Langkah pertama adalah membuat folder khusus untuk proyek button keren Anda. Dengan membuat folder terorganisir, Anda akan lebih mudah mengakses dan mengelola file-file yang diperlukan untuk proyek ini.

2. Buat Sebuah File “button_keren.html”

Setelah folder proyek dibuat, langkah berikutnya adalah membuat file HTML baru bernama “button_keren.html“. Di sinilah kita akan menulis kode HTML untuk button keren kita. Jangan khawatir jika Anda belum memiliki pengalaman dalam coding, langkah-langkahnya akan dijelaskan dengan detail untuk memudahkan pemahaman Anda.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Keren</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="button-container">
        <button class="btn btn1">Tombol 1</button>
        <button class="btn btn2">Tombol 2</button>
        <button class="btn btn3">Tombol 3</button>
        <button class="btn btn4">Tombol 4</button>
        <button class="btn btn5">Tombol 5</button>
    </div>
</body>
</html>
 

3. Buat File “style.css”

Selanjutnya, kita perlu membuat file CSS dengan nama “style.css” di dalam folder proyek. File ini akan berisi gaya CSS untuk merancang tampilan button kita. Jangan khawatir, Anda akan diberikan instruksi langkah demi langkah untuk setiap bagian kode, sehingga Anda dapat mengikuti dengan mudah.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.button-container {
    text-align: center;
    margin-top: 100px;
}

.btn {
    border: none;
    color: white;
    padding: 15px 32px; /* Ukuran tombol */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* Bentuk tombol */
    transition-duration: 0.4s; /* Efek transisi hover */
    background-color: #4CAF50; /* Warna latar */
}

.btn:hover {
    opacity: 0.7; /* Efek transparansi saat dihover */
}

/* Gaya untuk setiap tombol */

.btn1 {
    box-shadow: 5px 5px 5px #888888; /* Efek bayangan */
}

.btn2 {
    transform: scale(1.1); /* Efek pop-up */
}

.btn3 {
    border: 2px solid white; /* Efek border */
}

.btn4 {
    border-radius: 50%; /* Efek bulatan */
}

.btn5 {
    text-transform: uppercase; /* Huruf besar */
}
 

4. Mengubah Tampilan Button

Sekarang, mari kita ubah tampilan button agar terlihat lebih menarik dan keren. Anda dapat mengubah warna latar belakang, ukuran font, atau efek hover sesuai keinginan Anda dengan mengedit file “style.css“.

Baca Juga:  Cara Membuat Footer Sederhana dengan HTML dan CSS

5. Simpan & Lihat Tampilan

Setelah menyelesaikan pengeditan, simpan file HTML dan CSS Anda. Kemudian, buka file “button_keren.html” menggunakan browser web favorit Anda untuk melihat tampilan button keren yang baru saja Anda buat!

Preview hasil

Berikut ini preview hasil button keren dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat button keren menggunakan HTML dan CSS. Selamat mencoba! Jika Anda tertarik untuk mengetahui lebih lanjut tentang pengembangan web, jangan ragu untuk menjelajahi sumber daya online dan tutorial yang tersedia. Semoga artikel ini bermanfaat bagi Anda dalam memahami dasar-dasar pengembangan web dan meningkatkan keterampilan Anda dalam membuat desain yang menarik!

Related posts: