.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; } .btn:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }
在上面的代码中,大家定义了一个.btn类,用于控制按钮的样式。然后大家使用:active选择器来控制用户点击按钮时的行为。当按钮被点击时,它将会改变背景颜色,添加一个阴影效果,并向下移动4px。这让用户感觉到按钮被按下去了。
CSS中的点击事件可以让大家更好地控制用户在页面上的行为,从而提供更好的用户体验。