css中按钮的四种状态
css中按钮有四种状态
1. 普通状态
2. hover 鼠标悬停状态
3. active 点击状态
4. focus 取得焦点状态
.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框
下面的例子中.btn1用focus按钮会按下,不弹起
.btn2用active按钮点击按下,会弹起
<button class="btn btn1">Save Settings</button>
<button class="btn btn2">Submit</button>
.btn{
appearance: none;
background: #026aa7;
color: #fff;
font-size: 20px;
padding: 0.65em 1em;
border-radius: 4px;
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
margin-right: 1em;
cursor: pointer;
border:;
}
.btn1:hover{
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
}
.btn1:focus{
position: relative;
top: 4px;
box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);
outline:;
}
.btn2:hover{
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
}
.btn2:active{
position: relative;
top: 4px;
box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);
outline:;
}
.btn2:focus{
outline:;
}
css中按钮的四种状态的更多相关文章
- css中图片的四种地址引用
URL: CSS中四种引用图片asset的方式:
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- ccs中a链接的四种状态
什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.而在一个网页中 ...
- CSS控制a标签链接的四种状态
/*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...
- >hibernate的四种状态
hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...
- Hibernate的session缓存和对象的四种状态
一.session缓存 说session缓存就得说到JAVA对象的生命周期,当没有任何引用指向一个对象时,对象则可以被gc回收,也就是生命周期结束了 而hibernate获取一个对象后,会将对象存入s ...
- java线程四种状态
一个线程可以有四种状态: 1.新(new), 即线程刚刚创建,而并未执行 2.可运行(runnable),意味着一旦时间分片机制有空闲的CPU周期提供给一个线程,那个线程便可立即开始运行.因此,线程可 ...
- java核心知识点学习----并发和并行的区别,进程和线程的区别,如何创建线程和线程的四种状态,什么是线程计时器
多线程并发就像是内功,框架都像是外功,内功不足,外功也难得精要. 1.进程和线程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 用工厂来比喻就是,一个工厂可以生产不同种类的产品,操作系统就是 ...
- Android按钮的四种点击事件
本文记录一下按钮的四种点击事件 第一种 public class MainActivity extends Activity { @Override protected void onCreate(B ...
随机推荐
- python_15_os
import os #1. os.system('dir') #2 cmd_res=os.system('dir')#执行命令不保存结果 print("-------",cmd_r ...
- 查看电脑是否安装node.js
打开命令行
- ZJOI2004 午餐
题目传送门 嗯--我承认我看了题解,不过好歹有了点自己的思路,大约蒙出来了\(30\%\)(个人感觉)-- 学会\(DP\),任重而道远啊! Step1.贪心排序 先将每个人按吃饭的快慢排序,然后再进 ...
- 流行JAVA开发工具
流行JAVA开发工具 正所谓工欲善其事必先利其器,我们在开发java语言过程中同样需要依款不错的开发工具,目前市场上的IDE很多,本文为大家推荐以下下几款java开发工具: Eclipse(推荐):另 ...
- SQL Server数据库日志清除
第一步 将数据库转换成 simple 模式 USE master GO ALTER DATABASE 所要删除日志的数据库名 SET RECOVERY SIMPLE WITH NO_WAIT GO 第 ...
- shell中字符串基本用法
前言 今天在写脚本时,发现前阶段使用过的一些用法还是需要去百度查找,并且找到的答案还需要自己去筛选,耽误写脚本时间,这一篇对字符串之间的比较和逻辑判断都非常详细,借鉴他人之作,资源共享. 本片主要说明 ...
- 用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flock文件锁
linux中的定时任务crontab会定时执行一些脚本,但是脚本的时间往往无法控制,当脚本的执行时间过长,可能会导致上一次任务的脚本还没执行完,下一次任务的脚本又开始执行的问题.这种情况下会出现一些并 ...
- 卸载Redhat 7自带的yum,安装并使用网易163源
由于redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,安装CentOS yum工具,再配置其他源,以下为详细过程:删除redhat原有的yum ...
- JZOJ 5344. 摘果子
Description Input Output Sample Input 7 9 39 6 13 2 22 6 7 4 -19 5 28 6 -17 1 2 1 3 2 4 1 5 4 6 2 7 ...