Cara Membuat Efek Hover Background pada Button

28/07/2019    Risman Hakim    90     Website

Cara Membuat Efek Hover Background pada Button - Pada CSS terdapat properti yang bisa kita manfaatkan untuk membuat efek sederhana yakni efek hover, efek ini sangat mudah sekali digunakan dan menjadi salah satu favorit buat yang lagi belajar bahasa CSS. Dengan hover kita bisa membuat efek perubahan suatu elemen, misalnya saja efek perubahan warna, ukuran, perubahan background dan yang lain - lain nya. Nah, kali ini saya akan bagikan tutorial sederhana tentang hover yaitu bagaimana Cara Membuat Efek Hover Background pada Button. Simak langkah - langkahnya berikut ini.

Langkah pertama untuk membuat efek ini, tentu harus ditentukan elemen terlebih dahulu. Dalam kasus ini yang akan dikenakan efek adalah elemen button, untuk itu silahkan kalian bisa membuat button terlebih dahulu dengan kode HTML seperti berikut.

<body>
    <button>
      <div></div>
    </button>
</body>

Selanjutnya, setelah membuat elemen button seperti diatas, langkah selanjutnya adalah mendesain button dan efek utama yakni hover pada button yang akan dibuat sedemikian rupa dimana akan terjadi perubahan teks pada button dan efek background yang seolah - olah di zoom. Silahkan kalian bisa ketikan kode CSS nya berikut ini.

@import url("https://fonts.googleapis.com/css?family=Bree+Serif&display=swap");        
button
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    display: block;
    width: 240px;
    padding: 40px;
    margin: 0 auto;
    border: 0;
    cursor: pointer;
    border-radius: 50px;
    transform: translateY(-50%);
    box-shadow: 0 10px 20px -5px #94a6af;
    overflow: hidden;
}

button:before, button:after
{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

button:before
{
    transform: scale(1);
    background-image: url('bg.jpg');
    background-size: cover;
    transition: 0.3s ease transform;
    z-index: 1;
}

button:after
{
    background-color: #000;
    opacity: 0.16;
    z-index: 2;
}

button div
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

button div:before, button div:after
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    color: #fff;
    font-size: 30px;
    font-family: 'Bree Serif', serif;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 25px 0;
    transition: 0.3s ease all;
}

button div:before
{
    content: "SUBMIT";
    letter-spacing: 0;
    opacity: 1;
    transform: scale(1);
}

button div:after
{
    content: "OK !";
    letter-spacing: -10px;
    transform: scale(0);
    opacity: 0;
}

button:hover:before
{
    transform: scale(1.1);
}

button:hover div:before
{
    letter-spacing: 3px;
    opacity: 0;
    transform: scale(4);
}

button:hover div:after
{
    letter-spacing: 0;
    opacity: 1;
    transform: scale(1);
}

Langkah terakhir, setelah mengetikan semua kode HTML dan CSS kemudian simpan filenya dengan nama index.html dan untuk melihat hasil akhirnya bisa kalian buka pada halaman browser masing - masing.

Baiklah, cukup sekian tutorial CSS tentang bagaimana Cara Membuat Efek Hover Background pada Button, semoga tutorial ini bisa bermanfaat khusus nya buat kalian yang lagi belajar HTML dan CSS. Selamat mencoba :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More