CSS3是Web前端开发中非常重要的一部分，因为它可以帮助我们实现更加炫酷的效果。其中一个非常常见的需求就是点击效果，本文将介绍如何使用纯CSS3实现点击效果。

/* 定义按钮基本样式 */
.btn {
display: inline-block;
padding: 12px 24px;
border: 2px solid #333;
color: #333;
font-size: 16px;
text-align: center;
text-decoration: none;
cursor: pointer;
position: relative;
}
/* 按钮被点击时的效果 */
.btn:active {
top: 1px;
box-shadow: none;
}
/* 按钮松开时的效果 */
.btn:active::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
z-index: -1;
}

上面的代码中我们定义了一个基本的样式，然后分别在按钮被点击和松开时分别应用了两种效果。在按钮被点击时，我们使用相对定位将按钮上移1像素，创建出被按下去的效果，并去掉原有的阴影；在按钮松开时，我们使用伪元素在按钮上方创建一个半透明的遮罩，模拟出一个弹起的效果。

这样，在我们点击按钮时，就会出现一个炫酷的点按效果。这种效果看起来很简单，但是需要一定的CSS3基础，掌握了这种技巧，我们可以为页面增加更加生动的交互效果。