css3按钮点击效果如何实现 - 问答

在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属性用于设置颜色变化的持续时间。

0 赞

0 踩