css+svg实现带进度条显示的上传按钮效果代码
代码语言:html
所属分类:表单美化
代码描述:css+svg实现带进度条显示的上传按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --stroke: #86a6f9; --success: #25f42f; font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 Hind, sans-serif; } body { background: var(--bg); color: var(--fg); display: grid; place-items: center; height: 100vh; } .upload-btn { --dur: 0.25s; background: #255ff4; border-radius: 1.25em; color: #fff; cursor: pointer; padding: 0.5em 1em; position: relative; text-align: center; transition: all 0.1s linear; width: 6em; -webkit-tap-highlight-color: #0000; -webkit-a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0