css按钮点击波纹 |css3 11像素字体大小

.btn {
position: relative;
display: inline-block;
padding: 12px 32px;
color: #fff;
font-size: 20px;
background-color: #0099cc;
border-radius: 5px;
overflow: hidden;
}
.btn:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
opacity: 0;
}
.btn:focus:after, .btn:active:after {
width: 200%;
height: 200%;
opacity: 1;
transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

代码中，大家首先定义了一个作为按钮的样式类 .btn，然后给它设置了一些基础的样式属性。在按钮上方增加一个伪元素 :after，用来代表波纹效果。大家将它绝对定位到按钮中心，并设置宽高为0。

接着，大家为 .btn 的 focus 和 active 状态设置波纹效果。当按钮获得焦点或者被点击时，伪元素的宽高会变成按钮的两倍，透明度也变成1，从而形成了一个扩散的波纹效果。

利用这种方法，大家可以轻松地给按钮添加波纹效果，从而提升用户体验，让网站更加美观动人。