css实现多层立体按钮悬浮点击动画效果代码
代码语言:html
所属分类:其他
代码描述:css实现多层立体按钮悬浮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap"); *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; } :root { --btn-font-size: 1rem; --btn-text-color: hsla(96.67deg, 81.15%, 47.84%, 1); --btn-outline-color: hsla(96.67deg, 81.15%, 47.84%, 0.4); --btn-front-bgc: hsla(96deg, 37.04%, 10.59%, 0.3); --btn-front-bgc--hover: hsla(96deg, 37.04%, 10.59%, 0.75); } body { display: flex; justify-content: center; align-items: center; font-family: Orbitron, sans-serif; padding: 1rem; background-color: #111; } button { display: inline; padding: 0; border: 0; font: inherit; cursor: pointer; background: transparent; color: currentColor; user-select: none; -webkit-appearance: none; } .btn { position: relative; padding: 1rem 3rem; color: var(--btn-text-color); text-transform: uppercase; letter-spacing: 0.5em; text-align: center; } .btn::before, .btn::after { content: ""; position: absolute; top: 0; left: 0; outline: 1px dashed var(--btn-outline-color); width: 100%; height: 100%; transition: 250ms all ease; } .btn::before { transform: translate(-1rem, -1rem); } .btn::after { backgrou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0