html中button点击效果简单,css动画-实现一个最简单的水波纹效果button

类似material-ui的button效果

步骤

1. 在页面写出一个button 并赋予简单的样式

代码

这是一个按钮

button {

display: block; /* button 默认是inline-block 无法用margin给它居中 */

margin: 50px auto;

height: 60px;

width: 150px;

color: #FFF;

font-size: 16px;

background: #E95546;

outline: none;

border: 0;

cursor: pointer; /* 为了增加用户体验 */

position: relative; /* 为了保持和ripple的位置关系 */

overflow: hidden; /* 为了遮盖超出的ripple */

}

效果

2. 添加水波纹的基础css样式

代码

.ripple {

position: absolute; /* 为了保持和button的位置关系 */

border-radius: 50% 50%; /* 水波纹圆形 */

background: rgba(255, 255, 255, 0.4); /* 水波纹颜色 */

/* 下