按钮效果(转载)Button effect (reprint)

    <title>CodePen - Button Hover Effects</title>

    <style>
        html {
            padding-top: 50px;
            font-family: "Open Sans", Helvetica, arial, sans-serif;
            text-align: center;
            background-color: #eeeeee;
        }

        html *,
        html *:before,
        html *:after {
            box-sizing: border-box;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

        html i,
        html em,
        html b,
        html strong,
        html span {
            -webkit-transition: none;
            transition: none;
        }

        *:before,
        *:after {
            z-index: -1;
        }

        h1,
        h4 {
            font-family: "Raleway", "Open Sans", sans-serif;
            margin: 0;
            line-height: 1;
        }

        a {
            text-decoration: none;
            line-height: 80px;
            color: black;
        }

        .centerer {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        .wrap {
            width: 50%;
            float: left;
        }

        [class^="btn-"] {
            position: relative;
            display: block;
            margin: 20px auto;
            width: 100%;
            height: 80px;
            max-width: 250px;
            text-transform: uppercase;
            overflow: hidden;
            border: 1px solid currentColor;
        }

        .btn-0 {
            color: #925073;
        }

        .btn-0:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 80px;
            background: #4c1d36;
        }

        .btn-0:hover {
            color: #dfccd6;
        }

        .btn-0:hover:before {
            width: 250px;
        }

        .btn-0:active {
            background: #7f315a;
        }

        .btn-1 {
            color: #af4e49;
        }

        .btn-1:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: #611c19 transparent transparent transparent;
            position: absolute;
            top: 0;
            left: 0;
        }

        .btn-1:hover {
            color: #e8cbca;
        }

        .btn-1:hover:after {
            border-width: 330px 330px 0 0;
        }

        .btn-1:active {
            background: #a12f29;
        }

        .btn-1-2 {
            color: #61cdbe;
        }

        .btn-1-2:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent transparent #29766b;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .btn-1-2:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent #29766b transparent;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .btn-1-2:hover {
            color: #d1f0ec;
        }

        .btn-1-2:hover:before {
            border-width: 206.25px 0 0 206.25px;
        }

        .btn-1-2:hover:after {
            border-width: 0 0 206.25px 206.25px;
        }

        .btn-1-2:active {
            background: #45c4b3;
        }

        .btn-2 {
            color: #306570;
        }

        .btn-2:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent transparent #072c34;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .btn-2:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent #072c34 transparent transparent;
            position: absolute;
            top: 0;
            right: 0;
        }

        .btn-2:hover {
            color: #c2d2d5;
        }

        .btn-2:hover:before {
            border-width: 165px 0 0 165px;
        }

        .btn-2:hover:after {
            border-width: 0 165px 165px 0;
        }

        .btn-2:active {
            background: #0c4a57;
        }

        .btn-3 {
            color: #c45561;
        }

        .btn-3:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent transparent #6f2129;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .btn-3:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent #6f2129 transparent transparent;
            position: absolute;
            top: 0;
            right: 0;
        }

        .btn-3 span:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent #6f2129 transparent;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .btn-3 span:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: #6f2129 transparent transparent transparent;
            position: absolute;
            top: 0;
            left: 0;
        }

        .btn-3:hover {
            color: #eecdd1;
        }

        .btn-3:hover:before {
            border-width: 165px 0 0 165px;
        }

        .btn-3:hover:after {
            border-width: 0 165px 165px 0;
        }

        .btn-3:hover span:before {
            border-width: 0 0 165px 165px;
        }

        .btn-3:hover span:after {
            border-width: 165px 165px 0 0;
        }

        .btn-3:active {
            background: #b93745;
        }

        .btn-4 {
            color: #7d8d5c;
        }

        .btn-4:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent #3d4926 transparent transparent;
            position: absolute;
            top: 0;
            right: 0;
        }

        .btn-4:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent transparent #3d4926;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .btn-4:before,
        .btn-4:after {
            border-color: #3d4926;
        }

        .btn-4 span:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: #3d4926 transparent transparent transparent;
            position: absolute;
            top: 0;
            left: 0;
        }

        .btn-4 span:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent #3d4926 transparent;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .btn-4 span:before,
        .btn-4 span:after {
            border-color: #3d4926;
        }

        .btn-4:hover {
            color: #d9decf;
        }

        .btn-4:hover:before {
            border-width: 20px 63px;
        }

        .btn-4:hover:after {
            border-width: 20px 63px;
        }

        .btn-4:hover span:before {
            border-width: 20px 63px;
        }

        .btn-4:hover span:after {
            border-width: 20px 63px;
        }

        .btn-4:active {
            background: #66793f;
        }

        .btn-5 {
            color: #2a4770;
        }

        .btn-5:after {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent #021734 transparent transparent;
            position: absolute;
            top: 0;
            right: 0;
        }

        .btn-5:before {
            content: "";
            width: 0;
            height: 0;
            -webkit-transform: rotate(360deg);
            border-style: solid;
            border-width: 0 0 0 0;
            border-color: transparent transparent transparent #021734;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .btn-5:hover {
            color: #c0c9d5;
        }

        .btn-5:hover:before,
        .btn-5:hover:after {
            border-width: 80px 262.5px;
        }

        .btn-5:active {
            background: #042757;
        }

        .btn-6 {
            color: #a751d0;
        }

        .btn-6 span {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: #5b1e78;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-transition: width 0.4s, height 0.4s;
            transition: width 0.4s, height 0.4s;
            z-index: -1;
        }

        .btn-6:hover {
            color: #e5ccf1;
        }

        .btn-6:hover span {
            width: 562.5px;
            height: 562.5px;
        }

        .btn-6:active {
            background: #9832c8;
        }

        .btn-7 {
            color: #41c46a;
        }

        .btn-7:before,
        .btn-7:after,
        .btn-7 span:before,
        .btn-7 span:after {
            content: "";
            position: absolute;
            top: 0;
            width: 63.5px;
            height: 0;
            background: #136f30;
        }

        .btn-7:before {
            left: 0;
        }

        .btn-7:after {
            left: 125px;
        }

        .btn-7 span:before,
        .btn-7 span:after {
            top: auto;
            bottom: 0;
        }

        .btn-7 span:before {
            left: 62.5px;
        }

        .btn-7 span:after {
            left: 187.5px;
        }

        .btn-7:hover {
            color: #c7eed3;
        }

        .btn-7:hover:before,
        .btn-7:hover:after,
        .btn-7:hover span:before,
        .btn-7:hover span:after {
            height: 80px;
        }

        .btn-7:active {
            background: #1fb950;
        }

        .btn-8 {
            color: #377660;
        }

        .btn-8:before,
        .btn-8:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 0;
            background: #0c3829;
        }

        .btn-8:after {
            top: auto;
            bottom: 0;
        }

        .btn-8:hover {
            color: #c4d7d0;
        }

        .btn-8:hover:before,
        .btn-8:hover:after {
            height: 40px;
        }

        .btn-8:active {
            background: #145e44;
        }

        .btn-9 {
            color: #9b5097;
        }

        .btn-9:before,
        .btn-9:after,
        .btn-9 span:before,
        .btn-9 span:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 0;
            background: rgba(82, 29, 80, 0.25);
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }

        .btn-9:after,
        .btn-9 span:before {
            top: auto;
            bottom: 0;
        }

        .btn-9 span:before,
        .btn-9 span:after {
            -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
        }

        .btn-9:hover {
            color: #e2cce1;
        }

        .btn-9:hover:before,
        .btn-9:hover:after,
        .btn-9:hover span:before,
        .btn-9:hover span:after {
            height: 80px;
        }

        .btn-9:active {
            background: #893185;
        }

        .btn-10 {
            color: #4ab36a;
        }

        .btn-10:before,
        .btn-10:after,
        .btn-10 span:before,
        .btn-10 span:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 80px;
            background: rgba(25, 99, 48, 0.25);
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }

        .btn-10:after,
        .btn-10 span:before {
            left: auto;
            right: 0;
        }

        .btn-10 span:before,
        .btn-10 span:after {
            -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
        }

        .btn-10:hover {
            color: #cae9d3;
        }

        .btn-10:hover:before,
        .btn-10:hover:after,
        .btn-10:hover span:before,
        .btn-10:hover span:after {
            width: 250px;
        }

        .btn-10:active {
            background: #2aa550;
        }

        @-webkit-keyframes criss-cross-left {
            0% {
                left: -20px;
            }
            50% {
                left: 50%;
                width: 20px;
                height: 20px;
            }
            100% {
                left: 50%;
                width: 375px;
                height: 375px;
            }
        }

        @keyframes criss-cross-left {
            0% {
                left: -20px;
            }
            50% {
                left: 50%;
                width: 20px;
                height: 20px;
            }
            100% {
                left: 50%;
                width: 375px;
                height: 375px;
            }
        }

        @-webkit-keyframes criss-cross-right {
            0% {
                right: -20px;
            }
            50% {
                right: 50%;
                width: 20px;
                height: 20px;
            }
            100% {
                right: 50%;
                width: 375px;
                height: 375px;
            }
        }

        @keyframes criss-cross-right {
            0% {
                right: -20px;
            }
            50% {
                right: 50%;
                width: 20px;
                height: 20px;
            }
            100% {
                right: 50%;
                width: 375px;
                height: 375px;
            }
        }

        .btn-11 {
            position: relative;
            color: #9248bc;
        }

        .btn-11:before,
        .btn-11:after {
            position: absolute;
            top: 50%;
            content: "";
            width: 20px;
            height: 20px;
            background: #7f28b0;
            border-radius: 50%;
        }

        .btn-11:before {
            left: -20px;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*     animation: criss-cross-left 0.8s reverse; */
        }

        .btn-11:after {
            right: -20px;
            -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
            /*     animation: criss-cross-right 0.8s reverse; */
        }

        .btn-11:hover:before,
        .btn-11:hover:after {
            /*       @include size($btn-width); */
        }

        .btn-11:hover:before {
            -webkit-animation: criss-cross-left 0.8s both;
            animation: criss-cross-left 0.8s both;
        }

        .btn-11:hover:after {
            -webkit-animation: criss-cross-right 0.8s both;
            animation: criss-cross-right 0.8s both;
        }
    </style>
</head>

<body>
    <div class="centerer">
        <h1>Just Some More</h1>
        <h1>Button Hover Effects</h1>
        <h4>By: <a href="http://kylebrumm.com">Kyle Brumm</a></h4>

        <div class="wrap">
            <a class="btn-0" href="#">Swipe</a>
            <a class="btn-1" href="#">Diagonal Swipe</a>
            <a class="btn-1-2" href="#">Double Swipe</a>
            <a class="btn-2" href="#">Diagonal Close</a>
            <a class="btn-3" href="#"><span>Zoning In</span></a>
            <a class="btn-4" href="#"><span>4 Corners</span></a>
            <a class="btn-5" href="#">Slice</a>
        </div>
        <div class="wrap">
            <a class="btn-6" href="#">Position Aware<span></span></a>
            <a class="btn-7" href="#"><span>Alternate</span></a>
            <a class="btn-8" href="#">Smoosh</a>
            <a class="btn-9" href="#"><span>Vertical Overlap</span></a>
            <a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
            <a class="btn-11" href="#">Collision</a>
        </div>
    </div>

    <script src="http://zaole.net/sliding.js"></script>

    <script>
        $(function () {
            $(".btn-6")
                .on("mouseenter", function (e) {
                    var parentOffset = $(this).offset(),
                        relX = e.pageX - parentOffset.left,
                        relY = e.pageY - parentOffset.top;
                    $(this).find("span").css({
                        top: relY,
                        left: relX,
                    });
                })
                .on("mouseout", function (e) {
                    var parentOffset = $(this).offset(),
                        relX = e.pageX - parentOffset.left,
                        relY = e.pageY - parentOffset.top;
                    $(this).find("span").css({
                        top: relY,
                        left: relX,
                    });
                });
            $("[href=#]").click(function () {
                return false;
            });
        });
        //@ sourceURL=pen.js
    </script>

    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>
</body>