css实现波浪纹按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现波浪纹按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --color-dark: #110d1a; --color-primary: #b197fc; accent-color: var(--color-primary); } *, *::before, *::after { box-sizing: border-box; } body { font-family: system-ui; height: 100vh; background-color: var(--color-dark); } img { display: block; max-width: 100%; -o-object-fit: cover; object-fit: cover; } h1 { -webkit-margin-after: 1rem; margin-block-end: 1rem; font-size: 3rem; } a { color: var(--color-primary); text-decoration: none; } .wrapper { display: grid; place-content: center; height: 100vh; } .c-btn { position: relative; overflow: hidden; padding: 0.85rem 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); text-decoration: none; border-radius: 8px; background-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 0 0 1px var(--color-primary); transform: translateZ(0); } .c-btn::after { content: ""; pointer-events: none; position: absolute; top: 0; left: 0; z-index: 1; height: 120%; width: 120%; border-radius: 20%; background-color: var(--color-primary); scale: 0 0; translate: 0 140%; transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-btn__label { display: in.........完整代码请登录后点击上方下载按钮下载查看
网友评论0