一款纯css3实现的翻转按钮

之前为大家介绍了好多纯css3实现的很漂亮的按钮。今天小编要给各网友再分享一款纯css3实现的翻转按钮。实现中给出了两种的翻转特效，一种是基于按扭的左边缘为中心线，另一种是基于按钮的中间为中心线。我们一起看下效果图：

在线预览   源码下载

实现的代码

html代码：

 <article>
        <a target="_blank" class="btn-fold-1" href="http://www.w2bc.com"><span>Donate</span><span>to
            RIF</span> </a>
        <a target="_blank" class="btn-fold-2" href="http://www.w2bc.com"><span>Don</span><span>ate</span>
        </a>
    </article>

css3代码：

 *, *:before, *:after
        {
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        body
        {
            text-align: center;
            font-family: 'Droid Serif' , serif;
            background-color: #fafafa;
        }
        
        article
        {
            padding: 6rem 1rem;
            border-bottom: 1px solid #ebeaea;
        }
        article p
        {
            display: block;
            max-width: 50rem;
            margin: 0 auto;
            color: grey;
            text-align: left;
            font-size: 1.2rem;
            line-height: 1.7rem;
        }
        article p::-moz-selection
        {
            color: black;
            background-color: #fae900;
        }
        article p::selection
        {
            color: black;
            background-color: #fae900;
        }
        article p a
        {
            color: #0079c2;
            text-decoration: none;
            -webkit-transition: all .15s;
            transition: all .15s;
        }
        article p a:hover
        {
            background-color: #fae900;
            color: black;
        }
        article p a::-moz-selection
        {
            color: black;
            background-color: #fae900;
        }
        article p a::selection
        {
            color: black;
            background-color: #fae900;
        }
        
        .btn-fold-1
        {
            position: relative;
            display: inline-block;
            width: 28rem;
            z-index: 1;
            font-family: 'Varela Round' , sans-serif;
            text-decoration: none;
            font-size: 2.5rem;
            color: black;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 800px;
            perspective: 800px;
            -webkit-perspective-origin: 50% 200%;
            perspective-origin: 50% 200%;
            -webkit-transform: translateX(-25%) translateZ(0);
            transform: translateX(-25%) translateZ(0);
            -webkit-transition: -webkit-transform 0.8s;
            transition: transform 0.8s;
        }
        .btn-fold-1 span
        {
            position: relative;
            display: block;
            width: 50%;
            float: left;
            padding-top: 1rem;
            padding-bottom: .7rem;
            text-align: right;
        }
        .btn-fold-1 span:last-child
        {
            z-index: 2;
            padding-right: 1rem;
            padding-left: .6rem;
            text-align: left;
            background-color: #fae900;
        }
        .btn-fold-1 span:first-child
        {
            z-index: 3;
            padding-right: .6rem;
            padding-left: 1rem;
            pointer-events: none;
            background-color: #fae900;
            -webkit-backface-visibility: visible;
            backface-visibility: visible;
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            -webkit-transform: rotateY(179.9deg);
            transform: rotateY(179.9deg);
            -webkit-transition: -webkit-transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out;
        }
        .btn-fold-1 span:first-child:before
        {
            content: 'Donate';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding-top: 1rem;
            z-index: 4;
            color: white;
            text-align: center;
            background-color: #0079c2;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-transition: color 0s 0.2s, background-color 0s 0.2s;
            transition: color 0s 0.2s, background-color 0s 0.2s;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
        .btn-fold-1:hover
        {
            -webkit-transform: translateX(0) translateZ(0);
            transform: translateX(0) translateZ(0);
        }
        .btn-fold-1:hover > span:first-child
        {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
        }
        .btn-fold-1:hover > span:first-child:before
        {
            color: transparent;
            background-color: transparent;
        }
        
        .btn-fold-2
        {
            position: relative;
            display: inline-block;
            width: 14rem;
            z-index: 1;
            font-family: 'Varela Round' , sans-serif;
            color: white;
            text-decoration: none;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            background-color: #0079c2;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: translateX(0.5rem);
            -ms-transform: translateX(0.5rem);
            transform: translateX(0.5rem);
            -webkit-transition: background-color 0s 0.2s ease-in-out;
            transition: background-color 0s 0.2s ease-in-out;
        }
        .btn-fold-2 span
        {
            position: relative;
            width: 50%;
            float: left;
            padding-top: 1rem;
            padding-bottom: .7rem;
            pointer-events: none;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 400px;
            perspective: 400px;
            -webkit-perspective-origin: 50% 200%;
            perspective-origin: 50% 200%;
        }
        .btn-fold-2 span:after
        {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transition: -webkit-transform 0.4s, opacity 0s 0.2s ease-in-out;
            transition: transform 0.4s, opacity 0s 0.2s ease-in-out;
        }
        .btn-fold-2 span:first-child
        {
            z-index: 3;
            opacity: 1;
            text-align: right;
            background-color: #0079c2;
            box-shadow: -1rem 0 0 #0079c2;
            -webkit-transition: opacity 0s;
            transition: opacity 0s;
        }
        .btn-fold-2 span:first-child:after
        {
            content: 'ate';
            opacity: 1;
            padding-top: 1rem;
            text-align: left;
            background-color: #0079c2;
            -webkit-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transform: translateX(100%) rotateY(0);
            transform: translateX(100%) rotateY(0);
        }
        .btn-fold-2 span:last-child
        {
            z-index: 2;
            text-align: left;
            color: black;
            background-color: #fae900;
        }
        .btn-fold-2 span:last-child:after
        {
            content: 'don';
            opacity: 0;
            padding-top: 1rem;
            text-align: right;
            background-color: #fae900;
            box-shadow: -1rem 0 0 #fae900;
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            -webkit-transform: translateX(-100%) rotateY(180deg);
            transform: translateX(-100%) rotateY(180deg);
        }
        .btn-fold-2:hover
        {
            background-color: #fae900;
        }
        .btn-fold-2:hover > span:first-child
        {
            opacity: 0;
            -webkit-transition: opacity 0s 0.4s;
            transition: opacity 0s 0.4s;
        }
        .btn-fold-2:hover > span:first-child:after
        {
            opacity: 0;
            -webkit-transform: translateX(100%) rotateY(-180deg);
            transform: translateX(100%) rotateY(-180deg);
        }
        .btn-fold-2:hover > span:last-child:after
        {
            opacity: 1;
            -webkit-transform: translateX(-100%) rotateY(0.1deg);
            transform: translateX(-100%) rotateY(0.1deg);
        }

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6974