阅读量:0
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
颜色。你可以根据需要自定义渐变方向和颜色。