Membuat Button Dengan Background Color Gradient

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati. Kali ini saya akan membahas tentang cara Membuat Button Dengan Background Color Gradient. Color gradient adalah kombinasi warna lebih dari Â 1 tanpa mencampurkan warnanya.

Oke temen-teman, langsung saja kita buat struktur htmlnya terlebih dahulu ya untuk memulai Membuat Button Dengan Background Color Gradient. Scriptnya sebagai berikut ini.

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Button Dengan Color Gradient</title>
</head>
<body>
	<div class="container">
		<h1>Membuat Button Dengan Color Gradient</h1>
		<p><input type="" name="" placeholder="Nama"></p>
		<p><input type="" name="" placeholder="Jurusan"></p>
		<p><textarea placeholder="Alamat"></textarea></p>
		<button type="submit" name="submit" class="submit">Simpan</button>
		<button type="reset" name="reset" class="reset">Batal</button>
	</div>
</body>
</html>

Nah, jika sudah selesai maka kita masuk ke css untuk membuat style color gradient pada buttonnya. Berikut scriptnya ya teman-teman.

<style type="text/css">
		.container{margin:auto; width: 400px;}
		button.submit {background: linear-gradient(to bottom, #f70411 16%, #8f0222 44%, #f70018 99%); color:white; padding: 5px 15px; border:0px; box-shadow: 2px 2px 2px grey; border-radius: 10%}
		button.reset {background: linear-gradient(to right, #f70411 16%, #8f0222 44%, #f70018 99%); color:white; padding: 5px 15px; border:0px; box-shadow: 2px 2px 2px grey; border-radius: 10%}
</style>

Nah teman-teman bisa perhatikan di bagian property backround dengan value color gradientnya. Disini saya menggunakan dua value yang berbeda pada bagian posisi gradientnya. Jika sudah selesai mtema-teman buka di browser masing-masing maka akan terlihat perbedaanya dan tampilannya akan seperti pada gambar di bawah ini.

Tidak hanya dua saja, tapi posisi pada gradient bisa kita atur menjadi 8 sisi.

To Bottom yaitu memberikan efek color gradient secara horizontal dan ke arah bawah
To Top yaitu memberikan efek color gradient secara horizontal dan Â ke arah atas
To Right yaitu memberikan efek color gradient secara vertical dan Â ke arah kanan
To Left yaitu memberikan efek color gradient secara vertical dan Â ke arah kiri
To Top Right Â yaitu memberikan efek color gradient ke arah atas kanan
To Top Left yaitu memberikan efek color gradient ke arah atas kiri
To Bottom Right yaitu memberikan efek color gradient ke arah bawah kanan
To Bottom Left yaitu memberikan efek color gradient ke arah bawah kiri

Demikian artikel tentang cara Membuat Button Dengan Background Color Gradient. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Membuat Button Dengan Background Color Gradient

Kategori