css实现带阴影带进度的点击提交按钮效果代码-html代码-BFW代码库

css实现带阴影带进度的点击提交按钮效果代码

代码语言：html

代码描述：css实现带阴影带进度的点击提交按钮效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
    <style>
        @charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Karla",sans-serif;font-size:16px;color:#2c2c2c}body a{color:inherit;text-decoration:none}.btn{transition-property:all;transition-duration:.2s;transition-timing-function:linear;transition-delay:0s;padding:10px 20px;display:inline-block;margin-right:10px;background-color:#fff;border:1px solid #2c2c2c;border-radius:3px;cursor:pointer;outline:0}.btn:last-child{margin-right:0}.btn:hover,.btn.js-active{color:#fff;background-color:#2c2c2c}.header{max-width:500px;margin:50px auto;text-align:center}.header__title{margin-bottom:30px}.content{max-width:700px;width:95%;margin:0 auto 40px}.content__title{margin-bottom:40px;font-size:20px;text-align:center}.submit-buttons{display:flex;justify-content:space-around;flex-wrap:wrap}.submit-buttons__block{margin-bottom:40px}.submit-buttons__title{margin-bottom:20px;text-align:center}.submit-button{position:relative;display:flex;align-items:center;justify-content:center;width:200px;height:54px;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1.44px;box-shadow:0 16px 35px 0 rgba(0,0,0,0.25);outline:0;border:0;overflow:hidden;cursor:pointer}.submit-button__pending,.submit-button__loaded{position:absolute;top:0;left:0;width:100%;height:100%;background-image:inherit;opacity:0;visibility:hidden}.submit-button--3{background-image:linear-gradient(to .........完整代码请登录后点击上方下载按钮下载查看