悬停按钮特效-html代码-BFW代码库

代码语言：html

所属分类：悬停

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        .continue-application {
            --color: #fff;
            --background: #404660;
            --background-hover: #3A4059;
            --background-left: #2B3044;
            --folder: #F3E9CB;
            --folder-inner: #BEB393;
            --paper: #FFFFFF;
            --paper-lines: #BBC1E1;
            --paper-behind: #E1E6F9;
            --pencil-cap: #fff;
            --pencil-top: #275EFE;
            --pencil-middle: #fff;
            --pencil-bottom: #5C86FF;
            --shadow: rgba(13, 15, 25, .2);
            border: none;
            outline: none;
            cursor: pointer;
            position: relative;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            line-height: 19px;
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            padding: 17px 29px 17px 69px;
            -webkit-transition: background .3s;
            transition: background .3s;
            color: var(--color);
            background: var(--bg, var(--background));
        }
        .continue-application > div {
            top: 0;
            left: 0;
            bottom: 0;
            width: 53px;
            position: absolute;
            overflow: hidden;
            border-radius: 5px 0 0 5px;
            background: var(--background-left);
        }
        .continue-application > div .folder {
            width: 23px;
            height: 27px;
            position: absolute;
            left: 15px;
            top: 13px;
        }
        .continue-application > div .folder .top {
            left: 0;
            top: 0;
            z-index: 2;
            position: absolute;
            -webkit-transform: translateX(var(--fx,0));
            transform: translateX(var(--fx,0));
            -webkit-transition: -webkit-transform 0.4s ease var(--fd, 0.3s);
            transition: -webkit-transform 0.4s ease var(--fd, 0.3s);
            transition: transform 0.4s ease var(--fd, 0.3s);
            transition: transform 0.4s ease var(--fd, 0.3s), -webkit-transform 0.4s ease var(--fd, 0.3s);
        }
        .continue-application > div .folder .top svg {
            width: 24px;
            height: 27px;
            display: block;
            fill: var(--folder);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transition: -webkit-transform 0.3s ease var(--fds, 0.45s);
            transition: -webkit-transform 0.3s ease var(--fds, 0.45s);
            transition: transform 0.3s ease var(--fds, 0.45s);
            transition: transform 0.3s ease var(--fds, 0.45s), -webkit-transform 0.3s ease var(--fds, 0.45s);
            -webkit-transform: perspective(120px) rotateY(var(--fr, 0deg));
            transform: perspective(120px) rotateY(var(--fr, 0deg));
        }
        .continue-application > div .folder:before, .continue-application > div .folder:after,
        .continue-application > div .folder .paper {
            content: '';
            position: absolute;
            left: var(--l,0);
            top: var(--t,0);
            width: var(--w,100%);
            height: var(--h,100%);
            border-radius: 1px;
            background: var(--b, var(--folder-inner));
        }
        .continue-application > div .folder:before {
            box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
            -webkit-transform: translateX(var(--fx,0));
            transform: translateX(var(--fx,0));
            -webkit-transition: -webkit-transform 0.4s ease var(--fd, 0.3s);
            transition: -webkit-transform 0.4s ease var(--fd, 0.3s);
            transition: transform 0.4s ease var(--fd, 0.3s);
            transition: transform 0.4s ease var(--fd, 0.3s), -webkit-transform 0.4s ease var(--fd, 0.3s);
        }
        .continue-application > div .folder:after,
        .continue-application > div .folder .paper {
            --l: 1px;
            --t: 1px;
            --w: 21px;
            --h: 25px;
            --b: var(--paper-behind);
        }
        .continue-application > div .folder:after {
            -webkit-transform: translate(var(--pbx,0), var(--pby, 0));
            transform: translate(var(--pbx,0), var(--pby, 0));
            -webkit-transition: -webkit-transform 0.4s ease var(--pbd, 0s);
            transition: -webkit-transform 0.4s ease var(--pbd, 0s);
            transition: transform 0.4s ease var(--pbd, 0s);
            transition: transform 0.4s ease var(--pbd, 0s), -webkit-transform 0.4s ease var(--pbd, 0s);
        }
        .continue-application > div .folder .paper {
            z-index: 1;
            --b: var(--paper);
        }
        .continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
            content: '';
            width: var(--wp,14px);
            height: 2px;
            border-radius: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            left: 3px;
            top: var(--tp,3px);
            position: absolute;
            background: var(--paper-lines);
            box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
        }
        .continue-application > div .folder .paper:after {
            --tp: 6px;
            --wp: 10px;
        }
        .continue-application > div .pencil {
            height: 2px;
            width: 3px;
            border-radius: 1px 1px 0 0;
            top: 8px;
            left: 105%;
            position: absolute;
            z-index: 3;
            -webkit-transform-origin: 50% 19px;
            transform-origin: 50% 19px;
            background: var(--pencil-cap);
            -webkit-transform: translateX(var(--pex,0)) rotate(35deg);
            tra.........完整代码请登录后点击上方下载按钮下载查看