Langsung ke konten utama

Button Style

<!DOCTYPE html>
<html>
<head>
    <title>Pengenalan css</title>
    <style>
        button {
            margin-bottom: 10px;
        }
        .satu {
            border-radius: 10px;
        }
        .dua {
            background-color: blue;
            color: yellow;
            border: 2px solid red;
        }
        .tiga {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
        }
        .empat {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

    <button class="satu">Tombol</button>
    <br>
    <button class="dua">Tombol</button>
    <br>
    <button class="tiga">Tombol</button>
    <br>
    <button class="empat">Tombol</button>

</body>
</html>


Tag : margin-bottom
untuk memberi jarak antara button
Tag : border-radius
untuk menumpulkan sisi button dan jika di beri 50% maka button akan menjadi eclipse & jika button persegi empat maka akan menjadi lingkaran
Tag : border
untuk memberi garis tepi
Tag : box-shadow
untuk memberi bayangan
Tag : opacity
untuk membuat transparan
Tag : cusor : not-allowed
untuk membuat button tidak dapat di klik
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat paragraf pada website

Contoh membuat paragraf <!DOCTYPE html> <html> <head>     <title>Paragraf</title> </head> <body>     <p>ini adalah paragraf 1</p>     <p>ini adalah paragraf 2</p>     <p>ini adalah paragraf 3</p> <br>     <p>ini adalah paragraf 4</p>     <p>ini adalah paragraf 5</p>     <p>ini adalah paragraf 6</p> <hr>     <p>ini adalah paragraf 7</p>     <p>ini adalah paragraf 8</p>     <p>ini adalah paragraf 9</p> </body> </html> Tag <p> digunakan untuk membuat paragraf. Tag <br> digunakan untuk membuat spasi/jarak dari atas kebawah seperti fungsi ENTER. Tag <hr> mirip seperti fungsi <br> hanya saja menggunakan garis horizontal. Selamat mencoba😁
Posting Komentar
Baca selengkapnya

source code

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>   <style>      .y {       color: yellow;      }   </style> </head> <body> <div class="jumbotron text-center">   <h1>My First Bootstrap Page</h1>   <p>Resize this responsive page to see the e...
Posting Komentar
Baca selengkapnya

Membuat List

Cara membuat list  <!DOCTYPE html> <html> <head>     <title>List</title> </head> <body>     Nama Bulan : <br>     <ol>         <li>January</li>         <li>February</li>         <li>Maret</li>         <li>April</li>         <li>Mei</li>         <li>Juni</li>     </ol>     Nama Hari : <br>     <ul>         <li>Senin</li>         <li>Selasa</li>         <li>Rabu</li>         <li>Kamis</li>     ...
Posting Komentar
Baca selengkapnya