悬停按钮特效-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);.........完整代码请登录后点击上方下载按钮下载查看