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{ margin: 100px; } .btn-96, .btn-96 *, .btn-96 :after, .btn-96 :before, .btn-96:after, .btn-96:before { border: 0 solid; box-sizing: border-box; } .btn-96 { -webkit-tap-highlight-color: transparent; -webkit-appearance: button; background-color: #000; background-image: none; color: #fff; cursor: pointer; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 100%; line-height: 1.5; margin: 0; -webkit-mask-image: -webkit-radial-gradient(#000, #fff); padding: 0; } .btn-96:disabled { cursor: default; } .btn-96:-moz-focusring { outline: auto; } .btn-96 svg { display: block; vertical-align: middle; } .btn-96 [hidden] { display: none; } .btn-96 { box-sizing: border-box; display: block; font-weight: 900; -webkit-mask-image: none; padding: 2rem 5rem; perspective: 800px; position: relative; text-transform: uppercase; transform-style: preserve-3d; } .btn-96 span { background: #fff; color: #000.........完整代码请登录后点击上方下载按钮下载查看
网友评论0