来自codepen,http://codepen.io/PalashSharma20/pen/YWBAgN

知识点：屏幕居中、transform、transition、transition-delay

最重要的是idea

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        * { margin: 0; padding: 0; }

        body,

        html { height: 100%; min-height: 100%; }

        body { font-family: sans-serif; }

        .button { height: 200px; width: 400px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); display: table; cursor: pointer; background: #252525; transition: 0.333333333333333s all ease-in; color: #ff4c4c; }

            .button .border { background: #ff4c4c; position: absolute; transition: 1s all linear; }

                .button .border.o { height: 5px; width: 0; bottom: 0; left: 0; transition-delay: 1s; }

                .button .border.tw { bottom: 0; right: 0; width: 5px; height: 0; }

                .button .border.th { top: 0; right: 0; width: 0; height: 5px; transition-delay: 1s; }

                .button .border.f { top: 0; left: 0; width: 5px; height: 0; }

            .button:hover { background: #ff4c4c; color: #252525; transition-delay: 2s; }

                .button:hover .o,

                .button:hover .th { width: 100%; }

                .button:hover .tw,

                .button:hover .f { height: 100%; }

            .button span { display: table-cell; vertical-align: middle; font-size: 40px; text-align: center; letter-spacing: 13px; text-transform: uppercase; font-weight: 100; }

    </style>

</head>

<body>

    <div class="button">

        <span>hover me</span>

        <div class="border o"></div>

        <div class="border tw"></div>

        <div class="border th"></div>

        <div class="border f"></div>

    </div>

</body>

</html>

CSS3按钮效果的更多相关文章

  1. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  2. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  3. CSS3按钮效果制作

    CSS3按钮效果制作 首先附上效果图,按下去有一种下沉的效果, 未按效果 按下去效果 原理:第一个按钮相对比较简单,就直接是一个双重阴影效果,然后鼠标按下去让他的margin-top值为-3px,阴影 ...

  4. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

  5. 基础理解2:CSS3按钮动画

    一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定 ...

  6. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  7. CSS3按钮鼠标悬浮光圈效果

    1 .HTML相关知识点  HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为W ...

  8. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  9. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

随机推荐

  1. 理解 Nova 架构 - 每天5分钟玩转 OpenStack（23）

    Compute Service Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源. OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nov ...

  2. 关于Thinkcmf中热门文章的使用

    今天在做一个首页新闻列表页面的功能时候,因为要读取大量的新闻内容列表.如果每条数据都要从数据按照文章id和term_id来对应取值,无疑是很痛苦的. 然而机智如我,发现cmf框架中热门文章的用法: 在 ...

  3. RedHat6.2搭建FTP服务器

    我的环境: A:Red Hat Enterprise 6.2 IP:192.168.16.12 此机作测试端 B:Red Hat Enterprise 6.2 IP:192.168.16.13 此机做 ...

  4. TCP/IP四层模型和OSI七层模型

    TCP/IP四层模型 TCP/IP是一组协议的代名词,它还包括许多协议,组成了TCP/IP协议簇.TCP/IP协议簇分为四层,IP位于协议簇的第二层(对应OSI的第三层),TCP位于协议簇的第三层(对 ...

  5. 由于log太多导致ubuntu硬盘空间满了，进入不了系统解决办法

    具体现象是在图形界面输入用户名和密码之后,再次提示需要输入用户名和密码. 步骤一:按快捷键进入命令行界面.ctrl+alt+f1. 步骤二:清空文件 clear log cd /var/log sud ...

  6. IIS7注册本机模块

    问题描述:打开mp4文件要映射给mod_h264_streaming.dll(http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Intern ...

  7. Android 自定义Dialog类，并在Activity中实现按钮监听。

      实际开发中,经常会用到Dialog,比如退出时候会弹出是否退出,或者还有一些编辑框也会用Dialog实现,效果图如下: 开发中遇到的问题无非在于如果在Activity中监听这个Dialog中实现的 ...

  8. Word2Vec 使用总结

    word2vec 是google 推出的做词嵌入(word embedding)的开源工具. 简单的说,它在给定的语料库上训练一个模型,然后会输出所有出现在语料库上的单词的向量表示,这个向量称为&qu ...

  9. C#进阶系列——DDD领域驱动设计初探（五）：AutoMapper使用

    前言:前篇搭建了下WCF的代码,就提到了DTO的概念,对于为什么要有这么一个DTO的对象,上章可能对于这点不太详尽,在此不厌其烦再来提提它的作用: 从安全上面考虑,领域Model都带有领域业务,让Cl ...

  10. CSS基本知识2-CSS选择

    选择就是CSS定义的第一部分,可以用面向对象的模式来理解,或者声明式的面向对象. 标准选择: #.E 进阶选择:“,”分隔多个相同项,相当于类的实例. 如:#btn1,#btn2,.btn {...} ...