Cara membuat tombol warna gradien dengan html css, sangat gampang!

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.

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;
  }
}