button样式需要注意的有几点:

1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;

2、建议有一个padding,以免内部文本显得过于拥挤;

2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;

3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。

4、获得焦点时的outline建议去掉,否则较为难看。

普通状态样式设置:

```
.btn{
min-width: 60px;
padding: 5px 8px;
background: #fff;
color: #4daff9;
border: 1px solid #4daff9;
}
```

交互状态(hover、focus)样式设置:

        .btn:hover{
color: #fff;
background: #0a90f5;
}
.btn:focus{
color: #fff;
background: #0a90f5;
outline: none;
}

CSS开发技巧(一):button样式设置的更多相关文章

  1. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  2. CSS开发技巧(三):图片点击缩放

    前言  利用CSS实现图片的点击缩放是一个很值得研究的效果.在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度.然而图片限制了宽度,一些图片的细节便又无法看 ...

  3. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  4. Web之CSS开发技巧: CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  5. 提高你css技能的css开发技巧(转载)

    一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...

  6. 认识CSS中高级技巧之用户界面样式

    前端之HTML,CSS(九) CSS高级技巧 CSS用户界面样式 用户界面样式指更改用户操作样式,如更改用户的鼠标样式.表单轮廓等. 鼠标样式cursor cursor属性具有属性值有:default ...

  7. 提高你css技能的css开发技巧

    好久没整理博客了 进来啰嗦两句   继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...

  8. jquery mobile radio,checkbox button 样式设置

    <label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...

  9. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

随机推荐

  1. Ptask

    这是一款非常弱鸡的小程序,不喜勿喷 你们好!如在使用中有bug或者有您宝贵的建议请在下方评论区留言或者投递至我的邮箱:Mj_Ymr@outlook.com. 那么我也会不断更新,并在这里贴上各版本的下 ...

  2. vim效率操作

                                        vim效率操作 案例6:vim效率操作 6.1问题 本例要求掌握使用vim文本编辑器时能够提高操作效率的一些常用技巧和方法,完成 ...

  3. Linux系统安装java jdk

    1)下载地址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 我这里下载的是 ...

  4. golang--深入简出,带你用golang的反射撸一个公用后台查询方法

    一些基本方法 本篇不会介绍反射的基本概念和原理等,会从每个常用的方法入手,讲解一些基本和进阶用法,反射不太适合在业务层使用,因为会几何倍的降低运行速度,而且用反射做出来的程序健壮度不高,一旦一个环节没 ...

  5. 详细解析 HBASE 配置的各种要点

    文章更新于:2020-04-06 安装惯例,需要的文件附上链接放在文首. 文件名:hbase-2.2.4-bin.tar.gz 文件大小:213.24 MB 下载链接:http://download. ...

  6. javascript 入门 之 bootstrap 第一个程序

    <table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...

  7. python数据类型及有关的实用函数

    本系列例子使用python3.x, 编辑时间:2019-09-03,23:03:36 python以“对象引用”来存储数据,以对象来表达数据,每个对象都具有身份,对象和值. 实用函数: id(): 查 ...

  8. Spark 1.5 to 2.1.X

    api差异参考官网地址:https://spark.apache.org/docs/2.1.1/sql-programming-guide.html#upgrading-from-spark-sql- ...

  9. python3(三)enc

    # ASCII编码和Unicode编码的区别:ASCII编码是1个字节,而Unicode编码通常是2个字节. # Unicode把所有语言都统一到一套编码里,这样就不会再有乱码问题了. # 新的问题又 ...

  10. Python 获取任意周期开盘日

    import json import requests import datetime import tushare as ts cal_dates = ts.trade_cal() today=da ...