Cara Membuat Disable Button dengan Pure CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Disable Button dengan Pure CSS. sebelum kita mulai, pengenalan tentang pure css ini merupakan sebuah framework css. ya pada dasarnya sih sama saja dengan framework css yang lainnya seperti contoh familiarnya bootstrap namun fungsi dan tujuannya sama untuk mempermudah kita dalam membangun/mengembangkan website.

Oke langsung saja kita mulai Cara Membuat Disable Button dengan Pure CSS. Langkah pertama teman-teman silahkan download master pure css nya di https://purecss.io/ jika sudah silahkan extract, maka akan Nampak file index.html dan silahkan teman-teman buka ditext-editornya maka hasilnya akan sama seperti dibawah ini :

<!doctype html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                
                    <title>Your page title</title>
                
                    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css"></head>
                
                <body>
                    <!--
                    Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
                    -->
                </body>
                </html>

Cukup mudah yah teman-teman, oke langkah selanjutnya silahkan teman-teman tambahkan script seperti dibawah ini :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cara Membuat Disable Button dengan Pure CSS</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
    <style>
    	center{margin-top: 100px}
    </style>
</head>

<body>
<center>
    <button class="pure-button pure-button-disabled">Disable Button</button> <!-- class with purecss -->
    <button class="pure-button" disabled>Disabled Button</button> <!-- class use default disable -->
</center>
</body>
</html>

Jika sudah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Bagaimana teman-teman ? cukup mudah ya dalam Cara Membuat Disable Button dengan Pure CSS. dan untuk pengembangannya silahkan teman-teman baca-baca di website resminya di purecss.io dan silahkan ngulik-ngulik hehehe.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Disable Button dengan Pure CSS. semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih