Kembali ke Beranda
Web Development
andre10 Januari 2014

Pure CSS and Font Awsome

Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome.

Pure CSS Buttons

Dokumentasi ini menjelaskan penggunaan tombol pada Pure CSS, mulai dari tombol default, disabled, active, primary, hingga tombol custom dengan warna, ukuran, dan icon.

1. Default Buttons

Untuk membuat tombol Pure CSS, tambahkan class pure-button pada elemen <a> atau <button>.

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

2. Disabled Buttons

Untuk membuat tombol dalam kondisi disabled, tambahkan class pure-button-disabled bersama pure-button.

<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>

3. Active Buttons

Untuk membuat tombol terlihat seperti sedang ditekan, tambahkan class pure-button-active bersama pure-button.

<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>

4. Primary Buttons

Untuk menandai tombol sebagai aksi utama, tambahkan class pure-button-primary bersama pure-button.

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>

5. Customizing Buttons

Karena styling Pure CSS cukup minimal, tombol dapat dengan mudah dikustomisasi sesuai kebutuhan aplikasi.

Untuk membuat tombol custom, buat class CSS sendiri, misalnya pure-button-success, lalu gabungkan dengan class pure-button.

Contoh:

<button class="pure-button pure-button-success">Success Button</button>

6. Colored Buttons with Rounded Corners

Contoh tombol dengan warna khusus dan sudut membulat:

.pure-button-success,
.pure-button-error,
.pure-button-warning,
.pure-button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pure-button-success {
    background: rgb(28, 184, 65); /* green */
}

.pure-button-error {
    background: rgb(202, 60, 60); /* maroon */
}

.pure-button-warning {
    background: rgb(223, 117, 20); /* orange */
}

.pure-button-secondary {
    background: rgb(66, 184, 221); /* light blue */
}

Contoh HTML:

<button class="pure-button pure-button-success">Success Button</button>
<button class="pure-button pure-button-error">Error Button</button>
<button class="pure-button pure-button-warning">Warning Button</button>
<button class="pure-button pure-button-secondary">Secondary Button</button>

7. Buttons with Different Sizes

Pure CSS juga dapat dikombinasikan dengan class tambahan untuk mengatur ukuran tombol.

.pure-button-xsmall {
    font-size: 70%;
}

.pure-button-small {
    font-size: 85%;
}

.pure-button-large {
    font-size: 110%;
}

.pure-button-xlarge {
    font-size: 125%;
}

Contoh HTML:

<button class="pure-button pure-button-xsmall">Extra Small Button</button>
<button class="pure-button pure-button-small">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="pure-button pure-button-large">Large Button</button>
<button class="pure-button pure-button-xlarge">Extra Large Button</button>

8. Buttons with Icons

Pure CSS tidak menyediakan icon font bawaan, tetapi dapat digunakan bersama library icon seperti Font Awesome.

Setelah Font Awesome CSS ditambahkan ke halaman, icon dapat digunakan di dalam elemen tombol Pure CSS.

Contoh:

<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>

<button class="pure-button">
    <i class="fa fa-shopping-cart"></i>
    Checkout
</button>

<button class="pure-button">
    <i class="fa fa-download"></i>
    Download
</button>

9. Menggunakan Font Awesome

Langkah umum menggunakan Font Awesome:

  1. Download Font Awesome.
  2. Salin seluruh folder font-awesome ke dalam project.
  3. Tambahkan file CSS Font Awesome di dalam tag <head> HTML.
  4. Gunakan class icon Font Awesome di dalam tombol.

Contoh penggunaan CSS:

<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

Contoh tombol:

<a class="pure-button" href="#">
    <i class="fa fa-download"></i>
    Download Font Awesome
</a>

10. Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pure CSS Buttons</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@latest/build/pure-min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

    <style>
        .pure-button-success,
        .pure-button-error,
        .pure-button-warning,
        .pure-button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .pure-button-success {
            background: rgb(28, 184, 65);
        }

        .pure-button-error {
            background: rgb(202, 60, 60);
        }

        .pure-button-warning {
            background: rgb(223, 117, 20);
        }

        .pure-button-secondary {
            background: rgb(66, 184, 221);
        }

        .pure-button-xsmall {
            font-size: 70%;
        }

        .pure-button-small {
            font-size: 85%;
        }

        .pure-button-large {
            font-size: 110%;
        }

        .pure-button-xlarge {
            font-size: 125%;
        }
    </style>
</head>
<body>

    <h2>Default Buttons</h2>
    <a class="pure-button" href="#">A Pure Button</a>
    <button class="pure-button">A Pure Button</button>

    <h2>Disabled Buttons</h2>
    <button class="pure-button pure-button-disabled">A Disabled Button</button>

    <h2>Active Buttons</h2>
    <button class="pure-button pure-button-active">An Active Button</button>

    <h2>Primary Buttons</h2>
    <button class="pure-button pure-button-primary">A Primary Button</button>

    <h2>Colored Buttons</h2>
    <button class="pure-button pure-button-success">Success Button</button>
    <button class="pure-button pure-button-error">Error Button</button>
    <button class="pure-button pure-button-warning">Warning Button</button>
    <button class="pure-button pure-button-secondary">Secondary Button</button>

    <h2>Button Sizes</h2>
    <button class="pure-button pure-button-xsmall">Extra Small Button</button>
    <button class="pure-button pure-button-small">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="pure-button pure-button-large">Large Button</button>
    <button class="pure-button pure-button-xlarge">Extra Large Button</button>

    <h2>Buttons with Icons</h2>
    <button class="pure-button">
        <i class="fa fa-cog"></i>
        Settings
    </button>

    <button class="pure-button">
        <i class="fa fa-shopping-cart"></i>
        Checkout
    </button>

    <button class="pure-button">
        <i class="fa fa-download"></i>
        Download
    </button>

</body>
</html>

Source

  • http://purecss.io/buttons/
  • http://fortawesome.github.io
awshtml
Nirantara Logo

Published by Nirantara

Nirantara is an Indonesian Enterprise AI company specializing in Enterprise AI, RAG, Intelligent Search, and AI Automation. Article written by andre.

Learn more about Nirantara