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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！