css+js实现提交按钮点击进度反馈提示效果代码

代码语言:html

所属分类:表单美化

代码描述:css+js实现提交按钮点击进度反馈提示效果代码

代码标签: css js 提交 按钮 点击 进度 反馈 提示

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
   
<meta charset="UTF-8">
   
<style>
        * {
                font-family:'Roboto';
        }
        .super-container {
                width:100vw;
                height:100vh;
                display:flex;
                justify-content:center;
                align-items:center;
        }
        .container {
                width:200px;
                height:43px;
                position:relative;
                text-align:center;
                border-radius:25px;
                background-color:#D3E5FB;
                background:linear-gradient(    to left,#D3E5FB,#D3E5FB 50%,#4675a8 50%,#3c95fb  );
                background-position:90% 0;
                background-size:200% 100%;
                border:2px solid #3c95fb;
                pointer-events:all;
                transition:0.7s all;
        }
        .reset-background {
                border-radius:25px;
                background-color:#D3E5FB;
                background:linear-gradient(    to left,transparent,transparent 50%,#4675a8 50%,#3c95fb  );
                background-position:90% 0;
                background-size:200% 100%;
        }
        .circle {
                display:flex;
                justify-content:center;
                align-items:center;
                position:absolute;
                left:0%;
                height:44px;
                width:44px;
                background-color:#3c95fb;
                border-radius:50%;
                box-shadow:1px 1px 10px grey;
                transition:0.7s all;
        }
        .text {
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:14px;
                font-weight:500;
                color:#3c95fb;
                user-select:none;
        }
        .text-request {
                color:#D3E5FB;
        }
        .request {
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0