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. 使用Azure Rest API获得Access Token介绍

    背景 本文主要介绍如何获取如何获取Azure Rest API的访问token,所采用的是v2.0版本的Microsoft标识平台,关于1.0和2.0的区别可以参考 https://docs.azur ...

  2. ln 软连接与硬连接

                                                                                                        ...

  3. mpvue微信小程序怎么写轮播图,和官方微信代码的差别

    目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...

  4. linux被当矿机排查案例

    1.发现服务器变的特别卡,正常服务运行很慢. 到服务器上查询一番发现top下发现     bashd的进程占用100%CPU了. find /-name bashd* //第一次查询文件占用目录kil ...

  5. 安卓动画(Animation使用)

    安卓的Animation视图动画的使用非常简单,并且对象适用于一般控件. 具体使用步骤如下. Button/TextView/EditText/ImageView/Bitmap .....   obj ...

  6. pyecharts的使用及总结

    包的下载及配置 这个包的相应的配置较多,版本也不兼容,总结一下 预览:pyecharts画图 pip pyecharts pip 各级别地图(6.7个左右) pip jupyter环境 [为了生成pn ...

  7. VirtualBox的四种网络连接方式【转】

    VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...

  8. 《JavaScript 模式》读书笔记(6)— 代码复用模式2

    上一篇讲了最简单的代码复用模式,也是最基础的,我们普遍知道的继承模式,但是这种继承模式却有不少缺点,我们下面再看看其它可以实现继承的模式. 四.类式继承模式#2——借用构造函数 本模式解决了从子构造函 ...

  9. Jmeter--Mysql数据库压力测试

    前提环境要求:首先下载合适的数据库驱动 传送门:https://mvnrepository.com/artifact/mysql/mysql-connector-java 将下载好的驱动放到Jmete ...

  10. JMeter在Mac下的安装

    其实不论操作系统是Windows.Unix(如Mac OS).Linux(如Ubuntu)等,JMeter所需要的基础环境配置都是类似的,本文介绍JMeter for MAC的安装与环境配置. JMe ...