纯CSS实现点击出现冒泡动画的按钮

CSS button with bubbles，简单而实用的一款按钮控件。

css, button, bubble

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3886
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.btn-bubble {
    color: white;
    background-color: #77b11c;
    background-repeat: no-repeat;
}
.btn-bubble:hover,
.btn-bubble:focus {
    -webkit-animation: bubbles 1s forwards ease-out;
    animation: bubbles 1s forwards ease-out;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 52% 125% / 1.2em 1.2em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 67% 133% / 0.66em 0.66em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 64% 93% / 1.17em 1.17em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 22% 88% / 1.04em 1.04em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 43% 95% / 0.87em 0.87em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 97% 116% / 0.62em 0.62em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 62% 97% / 0.64em 0.64em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 87% 135% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) -4% 89% / 0.57em 0.57em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 89% 88% / 0.65em 0.65em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 6% 144% / 0.77em 0.77em;
    background-color: #77b11c;
    background-repeat: no-repeat;
}
@-webkit-keyframes bubbles {
    100% {
        background-position: 45% -182%, 61% -215%, 62% -196%, 18% -318%, 51% -86%, 88% -292%, 66% -244%, 89% -313%, -9% 9%, 99% -107%, 16% -282%;
        box-shadow: inset 0 -6.5em 0 #0072c4;
    }
}
@keyframes bubbles {
    100% {
        background-position: 45% -182%, 61% -215%, 62% -196%, 18% -318%, 51% -86%, 88% -292%, 66% -244%, 89% -313%, -9% 9%, 99% -107%, 16% -282%;
        box-shadow: inset 0 -6.5em 0 #0072c4;
    }
}
body {
    background: #10192d;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.btn {
    display: inline-block;
    text-decoration: none;
    padding: 1em 2em;
}

HTML

CSS button with bubbles，简单而实用的一款按钮控件。

css, button, bubble

编辑器支持Emmet

快捷键

CSS button with bubbles，简单而实用的一款按钮控件。

css, button, bubble

纯CSS实现的3D标题点击碎片化切换动画特效

纯CSS实现的交互式进度条（点击带进度填充动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：