Cara Membuat Efek Gradasi Pada Button

Cara Membuat Efek Gradasi Pada Button - Tutorial dumetschool kali ini akan membahas satu contoh efek yang dibuat oleh CSS3 yakni bagaimana Cara Membuat Efek Gradasi Pada Button. Gradasi merupakan kombinasi warna yang sangat menarik sekali sehingga efek gradasi menjadi salah satu efek yang banyak sekali digunakan pada desain - desain halaman website sekarang ini, satu contoh yang akan saya bagikan kepada kalian yakni penggunaan efek gradasi warna pada elemen button.

Bagi kalian yang penasaran bagaimana cara membuatnya, tidak ada salahnya untuk menyimak dan sealigus mengikuti langkah - langkahnya berikut ini.

Untuk membuat efek gradasi kali ini tentu elemen yang akan kita pakai adalah elemen button, silahkan kalian bisa membuat dan mengetikan seperti sintak berikut ini.

<body>
    <button class="btn btn-flex"></button>
</body>

Setelah membuat elemen button seperti diatas, selanjutnya adalah mendesain dan mengatur elemen button dan tentunya membuat efek gradasi warna pada buttonnya, silahkan kalian bisa ketikan sintak CSS3 seperti berikut.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #232323 74%);
}
.btn-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn {
    user-select: none;
}
button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    border: none;
    border-radius: 25px;
    background-color: #50d8d7;
    background-image: linear-gradient(316deg, #3cb5b5 0%, #e53b51 74%);
    transition: 500ms;
}
button::after {
    width: 143px;
    height: 43px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    content: 'SUBMIT';
    font-size: 20px;
    color: #eee;
    border-radius: 25px;
    background-color: #222;
    transition: 500ms;
}
button:hover::after {
    font-size: 25px;
    background-color: transparent;
}
button:focus {
    outline: none;
}

Setelah semua sintak HTML dan CSS telah kalian ketikan semua, silahkan simpan filenya kemudian kalian bisabuka pada browser masing - masing dan lihat hasilnya.

Dengan menambahkan efek gradasi warna pada elemen button seperti diatas, akan menjadikan style pada elemen terlihat lebih menarik dan bagus. Baiklah, cukup sekian tutorial dumetschool kali ini semoga tutorial Cara Membuat Efek Gradasi Pada Button bermanfaat, selamat mencoba dan sampai jumpa ditutorial dumetschool selanutnya. Simak juga artikel menarik lainnya hanya di dumetschool ya :)

15 Juni 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat