Membuat Tombol Glow dengan HTML dan CSS

Tombol merupakan sebuah element penting yang harus ada didalam sebuah website karena tombol sangat berfungsi dalam proses interaksi antara manusia dan komputer. Selain itu, desain element-element didalam website juga akan menambahkan ketertarikan pembaca untuk mengunjungi website tersebut. Oleh karena itu kali ini akan dijelaskan pembuatan tombol glow dengan HTML dan CSS.

A. Membuat Tombol Glow

Hal pertama adalah membuat element tombol. Didalam HTML, sebuah tombol dapat dibuat dengan menggunakan tag button. Ada dua jenis tombol yang akan dibuat diantaranya Glow Button dan Glow Border.

<button glowBorder blue>GLOW BORDER</button>
<button glowButton blue>GLOW BUTTON</button>

Selanjutnya desain tombolnya menggunakan CSS. Berikut kode CSS yang digunakan.

button[glowBorder], button[glowButton] {
    width: 200px;
    height: 60px;
    line-height: 60px;
    background: transparent;
    font-family: 'consolas','monospace';
    font-weight: bold;
    font-size: 15px;
    text-align: center;

    border: 0;
    border-radius: 60px;
    margin: 25px;
    transition: .5s;
}

button[glowBorder][blue] {
    color: #29f;
}
button[glowBorder][blue]:hover {
    box-shadow: 0 0 10px #5cf, 0 0 20px #29f;
}
button[glowButton][blue] {
    color: #29f;
    box-shadow: 0 0 3px #29f;
}
button[glowButton][blue]:hover {
    background: #29f;
    color: #000;
    box-shadow: 0 0 10px #5cf, 0 0 20px #29f;
}

B. Coba Sendiri

Kode tombol glow secara keseluruhan dapat dilihat pada editor dibawah ini. Silahkan untuk mencoba-coba sendiri.

RUN