css美化提交按钮点击显示进度条反馈动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css美化提交按钮点击显示进度条反馈动画效果代码
下面为部分代码预览,完整代码请点击下载或在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=Nunito&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg1: hsl(var(--hue),10%,90%); --bg2: hsl(var(--hue),10%,80%); --fg1: hsl(var(--hue),10%,10%); --fg2: hsl(var(--hue),10%,20%); --primary1: hsl(var(--hue),90%,55%); --primary2: hsl(var(--hue),90%,45%); font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 Nunito, sans-serif; } body { background-color: var(--bg1); color: var(--fg1); height: 100vh; display: grid; place-items: center; } /* Main button styles */ .btn { background-color: transparent; border-radius: 1.5em; display: block; position: relative; width: 7.5em; height: 3em; transition: width 0.3s ease-in-out; } .btn:not(:disabled):active { transform: translateY(0.1em); } .btn__text { background-color: var(--primary1); border-radius: inherit; color: hsl(0,0%,100%); display: inline-block; padding: 0.75em 1.5em; transition: background-color 0.15s linear, color 0.15s 0.3s ease-in-out; width: 100%; } .btn:not(:disabled):focus .btn__text, .btn:not(:disabled):hover .btn__text { background-color: var(--primary2); } .btn__progress { overflow: visible; position: absolute; top: 0; left: 0; width: 3em; height: 3em; visibility: hidden; } .btn__progress-track { r: 12px; stroke: var(--bg2); stroke-width: 24; } .btn__progress-fill { stroke: var(--primary1); stroke-dashoffset: 125.66; } .btn__progress-check { stroke: hsl(0,0%,100%); stroke-dashoffset: 34; } /* Both states */ .btn--running, .btn--done { outline: none; pointer-events: none; width: 3em; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .btn--running .btn__text, .btn--done .btn__text { color: transparent; transition: background-color 0.3s ease-in-out, visibility 0.3s steps(1); } .btn--running .btn__progress, .btn--done .btn__progress { visibility: visible; } /* Running state */ .btn--running .btn__text { background-color: var(--bg2); visibility: hidden; } .btn--running .btn__progress { transition: visibility 0.3s 0.3s steps(1,start); } .btn--running .btn__progress-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0