A flip button implemented in pure css3_html/css_WEB-ITnose

I have introduced many beautiful buttons implemented in pure CSS3 before. Today, the editor will share with netizens another flip button implemented in pure CSS3. Two flip effects are provided in the implementation, one is based on the left edge of the button as the center line, and the other is based on the middle of the button as the center line. Let’s take a look at the renderings:

Online preview Source code download

Implementation code

html code:

 <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 code:

 *, *: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);        }