[分享]CSS3按钮点击响应

CSS3是使用最为广泛的前端技术之一，他可以让我们实现许多想象中的效果，其中就包括按钮的点击响应效果。下面我们就来学习一下CSS3按钮点击响应的实现方法。html: 点一下试试 css: .click...

CSS3是使用最为广泛的前端技术之一，他可以让我们实现许多想象中的效果，其中就包括按钮的点击响应效果。下面我们就来学习一下CSS3按钮点击响应的实现方法。

html:
<button class="clickButton">点一下试试</button>

css:
.clickButton{
	width:150px;
	height:40px;
	background:#009ee1;
	border:none;
	color:white;
	font-size:20px;
	border-radius:20px;
}

.clickButton:active{
	transform:translateY(2px);
	background:#005b8b;
}

上面的代码中,我们创建了一个宽为150像素，高为40像素的按钮，背景色为#009ee1，边框为none，颜色设置为白色，字体大小为20像素，以及圆角半径为20像素。接下来我们使用CSS3的伪类:active来定义按钮的点击响应效果。在按钮被点击时，我们使用transform属性将按钮向下平移2像素，并将背景色修改为#005b8b。

通过使用上面的代码，我们可以实现一个简单的按钮点击响应效果。该效果使得当用户点击按钮时，按钮会发生很小的平移，并且按钮的背景色会随之改变，提高了用户与网站的互动感。