css实现一个悬浮三维凸出按钮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现一个悬浮三维凸出按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> button { --c: #1095c1; /* the color */ --b: .1em; /* border length*/ --d: 20px; /* the cube depth */ --_s: calc(var(--d) + var(--b)); color: var(--c); border: solid #0000; border-width: var(--b) var(--b) var(--_s) var(--_s); background: conic-gradient(at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box, conic-gradient(at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box; transform: translate(calc(var(--d)/-1),var(--d)); clip-path: polygon( var(--d) 0%, var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), 100% calc(100% - var(--d)), var(--d) calc(100% - var(--d)) ); transition: clip-path 0.5s, transform 0.5s; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0