来自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. android Intent使用

    ntent.setType(“image/*”);//图片格式 intent.setType(“audio/*”); //选择音频 intent.setType(“video/*”); //选择视频 ...

  2. sass入门

    SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS 官网介绍: sass is the most mature(成熟的),st ...

  3. mysql添加索引命令

    创建脚本 1.PRIMARY  KEY(主键索引)mysql>ALTER  TABLE  `table_name`  ADD  PRIMARY  KEY (  `column`  ) 2.UNI ...

  4. 一个完整的TCP连接

    当我们向服务器发送HTTP请求,获取数据.修改信息时,都需要建立TCP连接,包括三次握手,四次分手. 什么是TCP连接? 为实现数据的可靠传输,TCP要在应用进程间建立传输连接.它是在两个传输用户之间 ...

  5. 匈牙利算法 cogs 886. [USACO 4.2] 完美的牛栏

    886. [USACO 4.2] 完美的牛栏 ★★☆   输入文件:stall4.in   输出文件:stall4.out   简单对比时间限制:1 s   内存限制:128 MB USACO/sta ...

  6. Freemarker与Springmvc

    1.导入springmvc和freemarker的jar包 2.web.xml中配置Spring和Springmvc <?xml version="1.0" encoding ...

  7. Java 链表

    按链表的组织形式分有ArrayList和LinkList两种.ArrayList内部其实是用数组的形式实现链表,比较适合链表大小确定或较少对链表进行增删操作的情况,同时对每个链表节点的访问时间都是co ...

  8. linux系统下的权限知识梳理

    下面对linux系统下的有关权限操作命令进行了梳理总结,并配合简单实例进行说明.linux中除了常见的读(r).写(w).执行(x)权限以外,还有其他的一些特殊或隐藏权限,熟练掌握这些权限知识的使用, ...

  9. bash shell

    Linux的shell 与windows只有一种批处理脚本不同,由于早年的Unix年代,发展者众,出现了各种不同的distribution,因此也随着不同的distribution出现了各自的shel ...

  10. js小数点失精算法修正

    在用js计算0.07*100时候竟然=7.000000000000001 关于js失精算法你都遇到哪些,让我们一起来细数一下吧 console.log(0.07*100); // 7.00000000 ...