Home  >  Article  >  Web Front-end  >  A flip button implemented in pure css3_html/css_WEB-ITnose

A flip button implemented in pure css3_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:57:351163browse

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);        }

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn