Cara Membuat Efek Gradasi Pada Button
15/06/2020 Risman Hakim 2498 Website
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.
<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 :)
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
