Cara membuat tombol warna gradien dengan html css tentulah sangat gampang kita buat sobat.
saya bilang gampang karena di css terdapat properti yang dapat kita pakai untuk membuat warna gradiennya.
Baca juga: cara membuat button dengan html css
tombol yang kita buat nantinya akan seperti ini.
Gimana baguskan?
Oklah langsung saja berikut cara membuatnya
Cara membuat tombol warna gradien di html css
1. Buat file html terserah dengan nama apapun boleh. Kalau saya button.html
2. Buat file style.css juga untuk styling button/tombolnya nanti
3.pada file button.html ketikan kode dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button gradient with HTML CSS</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Button</button>
<button>Button</button>
<script src="main.js"></script>
</body>
</html>4. Setelah itu ketikan kode ini pada file style.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 15pt;
background: linear-gradient(45deg, #ece9e6, #ffffff);
}
button {
border: none;
padding: 20px 30px;
border-radius: 50px;
font-size: 2em;
letter-spacing: 5px;
font-family: 'Montserrat', sans-serif;
color: #ece9e6;
transition: .5s ease;
font-weight: 500;
margin: 10px;
}
button:first-child {
background: linear-gradient(135deg, #ff513f,#dd2476);
}
button:first-child:hover {
background: none;
border: 2px solid #ff513f;
color: #dd2476
}
button:nth-child(2) {
background: linear-gradient(145deg, #9d50bb, #6e48aa);
}
button:nth-child(2):hover {
background: none;
border: 2px solid #9d50bb;
color: #6e48aa;
}
@media (max-width: 420px) {
body {
flex-direction: column;
}
}5. Nah kalau sudah maka ketika dijalankan pada browser maka akan tampil seperti ini.
Jadi gimana sobat sangat gampang kan cara membuat tombol berwarna gradien menggunakan html css.
Terimakasih sudah membaca artikel kali ini. Semangat belajar ya sobat.
0 Komentar