来自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. 解决ntp的错误：no server can be used,exiting

    台湾地区一台机器进行时间同步时,出现下面的错误.很显然,它提示的是不能找到主机time.stdtime.gov.tw. 所以我初步猜测是由于dns解析的问题   1 2 3 4 #  /usr/sbi ...

  2. Android 通过Uri获取Bitmap对象

    (转自:http://blog.sina.com.cn/s/blog_5de73d0b0100zfm8.html) private Bitmap getBitmapFromUri(Uri uri) { ...

  3. Redis学习笔记1-Redis的介绍和认识

    说明:文章内容来自百度百科和redis官方对redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ...

  4. [WPF系列-高级TemplateBinding vs RelativeSource TemplatedParent]

    What is the difference between these 2 bindings: <ControlTemplate TargetType="{x:Type Button ...

  5. [转]什么鬼，又不知道怎么命名class了

    (本文作者Mrcxt,原文链接:http://blog.csdn.net/mrcxt/article/details/52038884) 相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个cla ...

  6. 【原】iphone6来了，我该做点什么(兼容iphone6的方法)

    北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...

  7. required string parameter XXX is not present

    @RequestParam jQuery调用方式: deleteFile: function(filePath) { return ajax({ method: 'POST', url: '/cm/s ...

  8. POJ2677 Tour[DP 状态规定]

    Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4307   Accepted: 1894 Description ...

  9. NSURLCache

    属性介绍: //获取当前应用的缓存管理对象 + (NSURLCache *)sharedURLCache; //设置自定义的NSURLCache作为应用缓存管理对象 + (void)setShared ...

  10. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 数据权限增强、范围权限增强

    并不是不想做B\S的管理工具,只是精力实在不够,由于用户权限管理组件是基础组件.所以C\S的也无妨,不会有几个人在乎Oracle,SQLServer是否不b\s的,注重的是功能性能,请大家不要纠结与是 ...