按钮点击波纹效应的CSS代码实现

按钮在我们今天的生活中随处可见。我们不会在现实中谈论真正的按钮。我们只能说电脑手机上显示的按钮是我们看到的按钮的120或120倍。不要说你没见过这么多按钮,但你就是不知道 有时看起来相同的按钮有不同的实现代码。 有按钮标签、输入标签、跨度标签按钮、标签按钮等。这里没有提到它们之间的区别。如果你感兴趣,你可以知道

我见过这么多按钮(我以前也分享过一个按钮。参见“按钮”实现代码。我认为谷歌的按钮看起来最好。涟漪效应就像一块石头落入平静的水面。我不知道读者是否喜欢它。让我们看看这个酷的涟漪效应按钮是如何用css代码实现的。

实现原理

  • 使用after伪类。
  • CSS3中的transform和transition属性过渡。

就是这么简单你没有看错,下面一起看看详细代码吧。

html:

<div style="background: #f2f2f2;">
<a class="ripple">Block level button </a>
</div>

css:
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle,#000 10%,transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10,10);
opacity: 0;
transition: transform .5s,opacity 1s;
}
.ripple{
background: #fff;
border-color: #ccc;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
display: block;
width: 100%;
position: relative;
overflow: hidden;
transform: translate3d(0,0,0);
}
大功告成,大家可以动手实操一下,简单又美观。

转载请注明出处:按钮点击波纹效应的CSS代码实现
本文链接:https://www.cmezy.com/blog/cssbwdj

评论0

请先

没有账号? 忘记密码?