div+css布局实现立体玻璃质感按钮按下点击反馈动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现立体玻璃质感按钮按下点击反馈动画效果代码
代码标签: div css 布局 立体 玻璃 质感 按钮 按下 点击 反馈 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .body { --global--size: clamp(2rem, 3em, 5rem); --anim--hover-time: 400ms; --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1); } /* Base Styles */ .body { width: 100%; height: 100%; margin: 0; padding: 100px; display: flex; align-items: center; justify-content: center; font-size: var(--global--size); background-color: #d7d7d7; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } /* ========== BUTTON ========== */ /* Button Wrap Container */ .button-wrap { position: relative; z-index: 2; border-radius: 999px; background: transparent; pointer-events: none; transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* Button Shadow Container */ .button-shadow { --shadow-cuttoff-fix: 2em; position: absolute; width: calc(100% + var(--shadow-cuttoff-fix)); height: calc(100% + var(--shadow-cuttoff-fix)); top: calc(0% - var(--shadow-cuttoff-fix) / 2); left: calc(0% - var(--shadow-cuttoff-fix) / 2); filter: blur(clamp(2px, 0.125em, 12px)); -webkit-filter:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0