之前为大家介绍了好多纯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:;

            padding:;

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

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

            padding-right: 1rem;

            padding-left: .6rem;

            text-align: left;

            background-color: #fae900;

        }

        .btn-fold-1 span:first-child

        {

            z-index:;

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

            right:;

            bottom:;

            left:;

            padding-top: 1rem;

            z-index:;

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

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

            right:;

            bottom:;

            left:;

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

            opacity:;

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

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

            text-align: left;

            color: black;

            background-color: #fae900;

        }

        .btn-fold-2 span:last-child:after

        {

            content: 'don';

            opacity:;

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

            -webkit-transition: opacity 0s 0.4s;

            transition: opacity 0s 0.4s;

        }

        .btn-fold-2:hover > span:first-child:after

        {

            opacity:;

            -webkit-transform: translateX(100%) rotateY(-180deg);

            transform: translateX(100%) rotateY(-180deg);

        }

        .btn-fold-2:hover > span:last-child:after

        {

            opacity:;

            -webkit-transform: translateX(-100%) rotateY(0.1deg);

            transform: translateX(-100%) rotateY(0.1deg);

        }

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

最新文章

  1. .dwg(sw)-exb
  2. select下拉框美化
  3. POJ C程序设计进阶 编程题＃6：流感传染
  4. 移动端开发，几个你可能不知道的CSS单位属性。
  5. Chosen中选择项的更新
  6. android访问asset目录下的资源
  7. 【Database】MySQL各版本的区别
  8. 复习一下SpringMVC的工作原理
  9. 利用html5压缩图片，产出base64图片
  10. BeautifulSoup练习第一节
  11. Dubbo(二) —— dubbo配置
  12. 在CentOS上配置SAMBA共享目录(转载)
  13. PubMed数据下载
  14. zabbix监控常见系统报错
  15. Spring Log4j2 log4j2.xml
  16. Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2
  17. varnish--vcl
  18. bzoj1043 [HAOI2008]下落的圆盘
  19. 团队合作开发git冲突解决方案 Intellij IDEA
  20. Socket 记录

热门文章

  1. scanf/sscanf %[]格式控制串的用法（转）
  2. 马老师 linux必备web服务入门及高级进阶
  3. Java IDE选择，常用Java IDE排行榜
  4. Squid调试和故障处理
  5. asp mvc @Html.CheckBox(&quot;sel&quot;,true) 往后台传值问题
  6. oc 中的.m和.mm文件区别
  7. 于C#控制台传递参数和接收参数
  8. 普里姆Prim算法介绍
  9. unity3d 通过添加rigidBody来指明物体是动态的，以避免cache开销
  10. mysql如何查找某字段所在表