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


C
ara 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;
}
}
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.

0 Response to "Cara membuat tombol warna gradien dengan html css, sangat gampang!"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel