CSS冲水按钮（Flush Button）带气泡动画

flush button with bubbles，按钮悬停时出现和鼠标位置相关而倾斜的水体填充效果。

button, hover, water

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900');
:root {
    --text-color: hsla(210, 50%, 85%, 1);
    --shadow-color: hsla(210, 40%, 52%, .4);
    --btn-color: hsl(210, 80%, 42%);
    --bg-color: #141218;
}
* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}
button {
    position: relative;
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: "Source Code Pro";
    font-weight: 900;
    text-transform: uppercase;
    font-size: 30px;
    color: var(--text-color);
    background-color: var(--btn-color);
    box-shadow: var(--shadow-color) 2px 2px 22px;
    border-radius: 4px;
    z-index: 0;
    overflow: hidden;
}
button:focus {
    outline-color: transparent;
    box-shadow: var(--btn-color) 2px 2px 22px;
}
.right::after,
button::after {
    content: var(--content);
    display: block;
    position: absolute;
    white-space: nowrap;
    padding: 40px 40px;
    pointer-events: none;
}
button::after {
    font-weight: 200;
    top: -30px;
    left: -20px;
}
.right,
.left {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.right {
    left: 66%;
}
.left {
    right: 66%;
}
.right::after {
    top: -30px;
    left: calc(-66% - 20px);
    background-color: var(--bg-color);
    color: transparent;
    transition: transform .4s ease-out;
    transform: translate(0, -90%) rotate(0deg)
}
button:hover .right::after {
    transform: translate(0, -47%) rotate(0deg)
}
button .right:hover::after {
    transform: translate(0, -50%) rotate(-7deg)
}
button .left:hover ~ .right::after {
    transform: translate(0, -50%) rotate(7deg)
}
/* bubbles */

button::before {
    content: '';
    pointer-events: none;
    opacity: .6;
    background: radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);
    width: 100%;
    height: 300%;
    top: 0;
    left: 0;
    position: absolute;
    animation: bubbles 5s linear infinite both;
}
@keyframes bubbles {
    from {
        transform: translate();
    }
    to {
        transform: translate(0, -66.666%);
    }
}

HTML

flush button with bubbles，按钮悬停时出现和鼠标位置相关而倾斜的水体填充效果。

button, hover, water

编辑器支持Emmet

快捷键

flush button with bubbles，按钮悬停时出现和鼠标位置相关而倾斜的水体填充效果。

button, hover, water

一款很棒的材料化设计中的行动按钮（Action Button）界面动效设计

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：