来自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. Terminate Instance 操作详解 - 每天5分钟玩转 OpenStack（33）

    本节通过日志详细分析 Nova Terminate 操作. Terminate 操作就是删除 instance,下面是 terminate instance 的流程图 向 nova-api 发送请求 ...

  2. shell 判断语句

    1.字符串判断 str1 = str2 当两个串有相同内容.长度时为真str1 != str2 当串str1和str2不等时为真-n str1 当串的长度大于0时为真(串非空)-z str1 当串的长 ...

  3. 字符串切分 String.Split 和 Regex.Split

    当切割字符串的是单个字符时可使用String.Split string strSample="ProductID:20150215,Categroy:Food,Price:15.00&quo ...

  4. HashMap实现原理及源码分析

    哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,而HashMap的实现原理也常常出 ...

  5. Leetcode: sliding window maximum

    August 7, 2015 周日玩这个算法, 看到Javascript Array模拟Deque, 非常喜欢, 想用C#数组也模拟; 看有什么新的经历. 试了四五种方法, 花时间研究C# Sorte ...

  6. Apache Hama安装部署

    安装Hama之前,应该首先确保系统中已经安装了hadoop,本集群使用的版本为hadoop-2.3.0 一.下载及解压Hama文件 下载地址:http://www.apache.org/dyn/clo ...

  7. CHM打不开的解决方法

    CHM打不开的解决方法 听语音 | 浏览:62240 | 更新:2013-02-04 14:58 | 标签:软件 1 2 3 4 5 6 分步阅读 一键约师傅 百度师傅高质屏和好师傅,拯救你的碎屏机 ...

  8. kendo ui简介

    Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha ...

  9. 为WebService指定线程池

    通过阅读WebService发布过程的源代码,可以配置自定义的线程池 package org.zln.ws.server;import com.sun.xml.internal.ws.api.Bind ...

  10. C# SaveFileDialog的用法(转载)

    #region 保存对话框private void ShowSaveFileDialog(){//string localFilePath, fileNameExt, newFileName, Fil ...