Membuat Tombol Close Dengan CSS

Jika waktu itu saya bahas tombol menu sekarang yang akan dibahas adalah membuat tombol close dengan css saja tanpa perlu menggunakan Icon, supaya blog yang dibuat tidak terlalu menggandalkan Icon-icon dengan meminimalisir icon pasti blog akan bertamabah kecepatanya. Sederhananya kita akan menggunakan kembali fungsi dari Before dan After untuk membuat Tombol Close ini.

Jika dilanjut pasti akan bagus yaitu ditambahkan dengan tombol menu pada saat diklik maka akan berubah ke tampilan close pasti akan bagus kan. Tapi sebelum kesana kita harus belajar dulu dari tahap bawah jangan langsung keatas.

Membuat Tombol Close Dengan CSS

Sebelum ke Tutorialnya kalian harus menyiapkan bahan-bahan terlebih dahulu.

Sublime (Sebagai Text Editor)
Makanan Ringan
Kopi
Niat

Pertama buka Sublime kalian bisa gunakan Text Editor apa saja seterah.

Kedua buat file dengan nama "Index.html" lalu simpan file tersebut dimana saja.

Ketiga buat struktur HTML atau HTML5 seterah kalian bila belum tahu copy kode dibawah ini dan pastekan ke file "index.html" pada sublime.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* tempat css*/
    </style>
</head>
<body>
    /* kode close */
</body>
</html>

Ke empat kalian tambahkan kode "div" seperti dibawah ini dibawah kode "<body>".

<div class="close"></div>

Kelima kalian tambahkan kode "css" seperti dibawah ini dibawah kode "<style>.

    body{
        margin: 0;
        padding: 0;
        background: #2ecc71;
    }
    .close{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }
    .close::before,.close::after{
        content: "";
        width: 34px;
        height: 160px;
        background: white;
        position: absolute;
        bottom: -50px;
        right: 0;
    }
    .close::before{
        transform: rotate(-45deg);
    }
    .close::after{
        transform: rotate(45deg);
    }

Jika ingin melihat source kodenya kalian bisa download dibawah ini :

Close Source

CodingT
File Size 1Kb

Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.

Untuk mendownload Softwarenya bisa dibawah :

Sublime

CodingT
File Size 8MB

Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.

Untuk melihat tampilan Menu tersebut kalian bisa lihat dibawah ini :

See the Pen How To Create Close With CSS by CodingT (@CodingT4) on CodePen.

Membuat Tombol Close Dengan CSS

Membuat Tombol Close Dengan CSS

Belum ada Komentar untuk "Membuat Tombol Close Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel