效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化;

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .btn{

            width: 80px;

            line-height: 30px;

            cursor:pointer;

            padding: 12px;

            text-align: center;

            font-size: 20px;

            color: #fff;

        }

        .f-color-control{

            transform: scale(1);

            border-radius:6px;

            background-color: #ff6700;

        }

        .f-color-control:before{

            position: absolute;

            top: 0;  right: 0;  bottom: 0;  left: 0;

            z-index:-1;

            border-radius:6px;

            background:rgba(0,0,0,.1);

        }

        .f-color-control:after{

            position: absolute;

            top: 0; right: 0; bottom: 0; left: 0;

            z-index:-1;

            border-radius:6px;

            background:rgba(255,255,255,.3);

        }

        .f-color-control:hover:before{

            content:"";

        }

        .f-color-control:active:after{

            content:"";

        }

    </style>

</head>

<body>

<div>

    <div class="btn f-color-control">登录</div>

</div>

</body>

</html>

纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果的更多相关文章

  1. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  2. 详解css3 pointer-events（阻止hover、active、onclick等触发事件来

    pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...

  3. css3 pointer-events（阻止hover、active、onclick等触发事件）

    pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target. /* Keyword values */ pointer-events: ...

  4. 5种漂亮的纯CSS3动画按钮特效

    这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...

  5. 纯CSS3动画按钮效果

    在线演示 本地下载

  6. Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...

  7. 纯CSS3实现牛奶般剔透的3D按钮特效

    今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...

  8. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  9. 9款经典华丽的CSS3分享按钮

    如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...

随机推荐

  1. eclipse下tomcat临时目录位置

    eclipse 开发web程序,启动tomcat服务器的时候.临时目录在你的工作区间workspace\.metadata\.plugins\org.eclipse.wst.server.core\t ...

  2. Objective-C 是动态语言

    Objective-C 的动态性是由 runtime 相关的库赋予的. 当然其他语言也完全可以运行在一个 Runtime 库上而获得动态性,由于多数高级语言的诞生都对应着一种编译器,因此将编译器的特性 ...

  3. hystrix 解决服务雪崩效应

    1.服务雪崩效应 默认情况下tomcat只有一个线程池去处理客户端发送的所有服务请求,这样的话在高并发情况下,如果客户端所有的请求堆积到同一个服务接口上, 就会产生tomcat的所有线程去处理该服务接 ...

  4. Java集合(二)--Iterator和Iterable

    Iterable: public interface Iterable<T> { Iterator<T> iterator(); } 上面是Iterable源码,只有一个ite ...

  5. 【转】MFC 自定义edit 限制输入十六进制内容 响应复制粘贴全选剪切的功能

    参考地址:MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能   Ctrl组合键ASCII码 ^Z代表Ctrl+z                     ASCII值 控制字符  AS ...

  6. 解决【npm ERR! Unexpected end of JSON input while parsing near '...sh_time":141072930277'】方案

    问题描述执行npm install的时候报错npm ERR! Unexpected end of JSON input while parsing near '...sh_time":141 ...

  7. 安装exe4j出现jre不匹配问题

    在安装exe4j 客户端,提示如下错误: 提示的错误信息大意如下:install4j安装时,在本系统中没有找到JRE(JavaRuntime Environment)(版本要求:最低1.5,最高1.6 ...

  8. 扫黑除恶Team第四次团队作业

    二.博客撰写要求 文章开头给出团队序号,开发的软件名称,仓库地址. 给出完成本次冲刺需要做的事情(Sprint Backlog)及相应说明. 本次冲刺总结. 三.评分规则 注意:本次作业总分61分.发 ...

  9. seq2seq（1）- EncoderDecoder架构

    零 seq2seq是从序列到序列的学习过程,最重要的是输入序列和输出序列是可变长的,这种方式就非常灵活了,典型的机器翻译就是这样一个过程. 一 最基本的seq2seq网络架构如下所示: 可以看到,en ...

  10. JavaScript实现AES算法加密和解密

    JavaScript的加密和解密用的是google的CryptoJS库.本文以AES/ECB/NoPadding为例展示AES加密和解密的方法. 需要下载CryptoJS库,下载地址如下:https: ...