阅读量:0
在CSS3中，可以使用伪类:active来实现按钮点击效果。以下是一个简单的示例：
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 Button Click Effect</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button class="btn">Click me</button> </body> </html> CSS (styles.css):
.btn { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; transition-duration: 0.4s; } .btn:active { background-color: #45a049; } 在这个示例中，我们创建了一个名为.btn的按钮。当用户点击按钮时，:active伪类会使按钮的背景颜色从#4CAF50变为#45a049，从而产生点击效果。transition-duration属性用于设置颜色变化的持续时间。
