css 按钮点击特效 |aftrer css 样式

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
transition: 0.4s;
}
.button:hover {
background-color: #004a64;
}
.button:active {
background-color: #002e3d;
transform: translateY(3px);
}

在上面的代码中，大家为按钮添加了一个过渡效果，当鼠标悬停在按钮上时，背景色从亮蓝色变成深蓝色，过渡时间为0.4秒；当按钮被点击时，背景颜色变为更深的蓝色，并向下移动3像素。

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.button:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #004a64;
z-index: -1;
transition: transform 0.4s ease-out;
transform: scaleX(0);
transform-origin: 0 50%;
}
.button:hover:after {
transform: scaleX(1);
}

在上面的代码中，大家使用伪类:after来创建一个覆盖在按钮上的元素。当鼠标悬停在按钮上时，这个元素的 scaleX（横向缩放）属性从0变成1，通过transition属性使过渡更加平滑。

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
position: relative;
cursor: pointer;
overflow: hidden;
user-select: none;
}
.button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.4);
opacity: 0;
pointer-events: none;
}
.button:active::before {
width: 220px;
height: 220px;
opacity: 1;
transition: all 0.4s linear;
}

在上面的代码中，大家增加了一个圆形的白色光环。光环在按钮正中央，并且在按钮被点击时，光环的半径急速扩大，达到放大的光效的效果。

这些是一些CSS按钮点击特效的示例。有了这些想法，你可以尝试自己创建自己的CSS按钮效果。