纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果
代码如下:
<!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 时颜色的明暗变化效果的更多相关文章
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- 详解css3 pointer-events(阻止hover、active、onclick等触发事件来
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...
- css3 pointer-events(阻止hover、active、onclick等触发事件)
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target. /* Keyword values */ pointer-events: ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...
- 纯CSS3动画按钮效果
在线演示 本地下载
- Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...
- 纯CSS3实现牛奶般剔透的3D按钮特效
今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 9款经典华丽的CSS3分享按钮
如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...
随机推荐
- Context namespace element 'annotation-config' and its parser class [org.springframework.context.annotation.AnnotationConfigBeanDefinitionParser]
严重: Exception sending context initialized event to listener instance of class org.springframework.we ...
- Android下多彩的StatusView的实现
概述 在上一个博文 Anroid沉浸式状态栏中提到了,画了一个图,这个图简单将我们的状态栏分为不同的2个维度来看状态栏.其中涉及的概念我不在赘诉,请返到Anroid沉浸式状态栏再去认识下这几个概念.本 ...
- Android 关于文件及文件夹的创建 、删除、重命名、复制拷贝
package com.example.administrator.myapplication.util; import java.io.BufferedReader;import java.io.B ...
- vue 轮播插件使用
<template> <div> <Swiper ref="swiper" v-if="list.length > 0" : ...
- galera cluster安装与配置
由于公司数据量与并发的日渐增大,普通的主从复制已无法满足要求.对比了网上PXC.galera.mysql cluster等方案,最终决定选择galera cluster. 以下为安装步骤: 1.下载g ...
- lucene-5.3.1配置(win7x64)
lucene下载地址:http://www.us.apache.org/dist/lucene/java/5.3.1/lucene-5.3.1.zip 下载之后解压 控制台应用程序下配置: 找到luc ...
- Ubuntu系统搭建django+nginx+uwsgi
1. 在开发机上的准备工作 2. 在服务器上的准备工作 3.安装uwsgi 4.编写uwsgi配置文件,使用配置文件启动uwsgi 5. 安装nginx 6. 收集静态文件 7. 编写nginx配置文 ...
- Python之使用eval()函数将字符串的数据结构提取出来
data = input('请输入你要修改的对象:').strip() ''' 输入下面的字典列表 [{'backend':'www.oldboy1.org','record':{'server':' ...
- add list of symbols in latex
* add list of symbols -- latex 1. createa new tex file named "toc.tex' with the following conte ...
- 基本dos
文件夹的操作: 进入指定盘符:盘符名+: dir:列出当前控制台下的所有文件以及文件夹 . cd +文件夹名称:进入指定文件夹 cd.. 返回上一级 cd \返回到当前目录的根目 ...