CSS3按鈕可以實現漸變效果。你可以使用CSS3的線性漸變(linear-gradient)或徑向漸變(radial-gradient)功能來為按鈕添加漸變背景。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Gradient Button</title>
</head>
<body>
<button class="gradient-button">Click me</button>
</body>
</html>
CSS (styles.css):
.gradient-button {
background: linear-gradient(to right, #ff9a9e, #fad0c4);
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.gradient-button:hover {
background: linear-gradient(to right, #a1c4fd, #c2e9fb);
}
在這個示例中,我們創建了一個具有線性漸變背景的按鈕。漸變從左邊的#ff9a9e
顏色漸變到右邊的#fad0c4
顏色。當鼠標懸停在按鈕上時,背景漸變會改變,從左邊的#a1c4fd
顏色漸變到右邊的#c2e9fb
顏色。你可以根據需要自定義漸變方向和顏色。