css中按钮有四种状态

1. 普通状态
2. hover 鼠标悬停状态
3. active 点击状态
4. focus 取得焦点状态

.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框

下面的例子中.btn1用focus按钮会按下,不弹起
      .btn2用active按钮点击按下,会弹起

  1. <button class="btn btn1">Save Settings</button>
  2. <button class="btn btn2">Submit</button>
  1. .btn{
  2. appearance: none;
  3. background: #026aa7;
  4. color: #fff;
  5. font-size: 20px;
  6. padding: 0.65em 1em;
  7. border-radius: 4px;
  8. box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
  9. margin-right: 1em;
  10. cursor: pointer;
  11. border:;
  12. }
  13. .btn1:hover{
  14. box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
  15. }
  16. .btn1:focus{
  17. position: relative;
  18. top: 4px;
  19. box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);
  20. outline:;
  21. }
  22. .btn2:hover{
  23. box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
  24. }
  25. .btn2:active{
  26. position: relative;
  27. top: 4px;
  28. box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);
  29. outline:;
  30. }
  31. .btn2:focus{
  32. outline:;
  33. }

css中按钮的四种状态的更多相关文章

  1. css中图片的四种地址引用

    URL: CSS中四种引用图片asset的方式:

  2. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  3. ccs中a链接的四种状态

    什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.而在一个网页中 ...

  4. CSS控制a标签链接的四种状态

    /*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...

  5. >hibernate的四种状态

    hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...

  6. Hibernate的session缓存和对象的四种状态

    一.session缓存 说session缓存就得说到JAVA对象的生命周期,当没有任何引用指向一个对象时,对象则可以被gc回收,也就是生命周期结束了 而hibernate获取一个对象后,会将对象存入s ...

  7. java线程四种状态

    一个线程可以有四种状态: 1.新(new), 即线程刚刚创建,而并未执行 2.可运行(runnable),意味着一旦时间分片机制有空闲的CPU周期提供给一个线程,那个线程便可立即开始运行.因此,线程可 ...

  8. java核心知识点学习----并发和并行的区别,进程和线程的区别,如何创建线程和线程的四种状态,什么是线程计时器

    多线程并发就像是内功,框架都像是外功,内功不足,外功也难得精要. 1.进程和线程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 用工厂来比喻就是,一个工厂可以生产不同种类的产品,操作系统就是 ...

  9. Android按钮的四种点击事件

    本文记录一下按钮的四种点击事件 第一种 public class MainActivity extends Activity { @Override protected void onCreate(B ...

随机推荐

  1. python_14_sys_mod

    import sys #1 print(sys.path)#打印环境变量 #2 print(sys.argv)#打印相对路径 print(sys.argv[2])#在cmd命令窗口运行本文件

  2. python_41_with语句

    #为了避免打开文件后忘记关闭,可以通过管理上下文,即:with open('log','r') as f: # 如此方式,当with代码块执行完毕时,内部会自动关闭并释放文件资源. with open ...

  3. java中利用JOptionPane类弹出消息框的部分例子

    转: http://www.cnblogs.com/wangxiuheng/p/4449917.html http://blog.csdn.net/penjie0418/article/details ...

  4. 济南NOIP冬令营 选拔(select)

    选拔(select) Time Limit:2000ms   Memory Limit:128MB 题目描述 LYK对n个女生有好感.第i个女生的身高为ai. LYK要在这些女生中选拔出一个女生来作为 ...

  5. 二十五、MySQL 索引

    MySQL 索引 MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索 ...

  6. thinkphp 3.2.3 - Think.class.php 解析

    class Think { public static function start() { // 注册AUTOLOAD方法 spl_autoload_register('Think\Think::a ...

  7. poj 2533Longest Ordered Subsequence

    Longest Ordered Subsequence Description A numeric sequence of ai is ordered if a1 < a2 < - < ...

  8. 从头开始学习数据库及ADO.NET——竹子整理

    目前为止,学习编程一年有余,写过管理系统,写过商城,写过桌面,接触的多了,乱七八糟的点太多,一堆前段框架,后台类库,纷纷杂杂,更新迭代之快也是令人咋舌.于是我就在想,作为一名程序员,哪些内容是实打实的 ...

  9. sql中over的用法

    over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用.其参数:over(partition by columnname1 order by c ...

  10. UVa 1455 Kingdom 线段树 并查集

    题意: 平面上有\(n\)个点,有一种操作和一种查询: \(road \, A \, B\):在\(a\),\(b\)两点之间加一条边 \(line C\):询问直线\(y=C\)经过的连通分量的个数 ...