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 ...
随机推荐
- javaweb基础(31)_国际化(i18n)
一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
- jQuery Pagination分页插件--无刷新
源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...
- C# StreamReader对象
1.读取文件 输入流用于从外部源读取数据,在很多情况下,数据源可以是磁盘上的文件或网络的某些位置,任何可能发送数据的位置都可以是数据源,比如网络应用程序,web服务,甚至是控制台.StreamRead ...
- Beyond Compare在Mac下永久试用
转自 作者:忆如初 链接:https://www.jianshu.com/p/596b4463eacd 来源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. 亲测可用 一. ...
- 51nod——1285 山峰和分段(暴力出奇迹)
要求每段的点数都一样,因此分的段数cnt肯定是n的因子,要求每段都有山峰,因此cnt肯定小于等于山峰数量.分段的宽度d=n/cnt,对山峰数量做一个前缀和,检查一下每一段的山峰数量是否没有增加即可. ...
- .NET下寄宿于控制台的HTTPS监听
附上原文链接:https://blogs.msdn.microsoft.com/jpsanders/2009/09/29/how-to-walkthrough-using-httplistener-o ...
- spring boot 集成swagger2
1 在pom.xml中加入Swagger2的依赖 <dependency> <groupId>io.springfox</groupId> <artifac ...
- JZ2440开发板与ubuntu互ping,然后进行文件的共享和挂载
操作手册如下:但本人直接用网线直接连通开发板的网口与电脑的网口没有成功过.采用路由器可以直接ping通,具体操作如下: 首先用网线将开发板和路由器连接.电脑无论是用wifi还是网线均可.然后关闭Win ...
- 企业shell面试题及解答
1.面试题:使用for循环在/tmp目录下批量创建10个html文件,其中每个文件需要包含10个随机小写字母加固定字符串template,示例如下 aaesdffbnv_template.html 方 ...
- 【JAVA】cxf使用springboot与xml配置的差别所导致的问题。
使用xml时使用以下配置使报文没有加上命名空间时也能正常访问接口.bean定义的前后顺序不影响程序正常注册对象. <!-- 通过Spring创建数据绑定的类 --> <bean id ...