Membuat Tombol Close Dengan CSS

by
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.

  1. Sublime (Sebagai Text Editor)
  2. Makanan Ringan
  3. Kopi
  4. 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


download Ulang

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


download Ulang

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.

Leave a Comment