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. Java第十三天,内部类

    内部类 一.①成员内部类.②局部内部类(包含③匿名内部类) 1.内部类用外部类属性和方法的时候,可以随意进行访问. 2.外部类用内部类属性和方法的时候,需要通过内部类对象访问. 3.在编译成class ...

  2. String 对象-->lastIndexOf() 方法

    1.定义和用法 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索. 语法: string.lastInde ...

  3. Go语言 命令行解析(一)

    命令行启动服务的方式,在后端使用非常广泛,如果有写过C语言的同学相信不难理解这一点!在C语言中,我们可以根据argc和argv来获取和解析命令行的参数,从而通过不同的参数调取不同的方法,同时也可以用U ...

  4. Flex Socket与Java通信实例说明(转)

    Flex Socket与Java通信实例说明(转) 这两天一直在flex的Socket ,现在终于懂了很多.由浅到深一步一步深入.慢慢体会实例,虽然实例都是在网上找的,但也经过了我的测试.我比较喜欢注 ...

  5. day02,静态库和动态库

    一.首先我们来看一下什么是静态库和动态库,在这之前我们来看一下编译成可执行文件的过程: 1.静态库(.a..lib):就是在使用的时候会把代码复制到文件中: 它的优点:独立,在链接后不需要静态库源文件 ...

  6. 千亿级平台技术架构:为了支撑高并发,我把身份证存到了JS里

    @ 目录 一.用户信息安全规范 1.1 ​用户信息.敏感信息定义及判断依据 1.1.1 个人信息 1.1.2 个人敏感信息 1.2 ​用户信息存储的注意事项 二.​框架技术实现 2.1 用户敏感信息自 ...

  7. L24 word2vec

    词嵌入基础 我们在"循环神经网络的从零开始实现"一节中使用 one-hot 向量表示单词,虽然它们构造起来很容易,但通常并不是一个好选择.一个主要的原因是,one-hot 词向量无 ...

  8. 并查集判树 poj 1308

    例题: poj 1308 题目大意比较简单,对任意两个点,有且仅有一条道路,也就是一棵树. 题解:一棵树中,肯定是不能有环的,而且只能由一个根节点.(没认真读题,只知道在那里判环....),所以这个题 ...

  9. B - Cow Marathon DFS+vector存图

    After hearing about the epidemic of obesity in the USA, Farmer John wants his cows to get more exerc ...

  10. F - Dragon Balls

    Five hundred years later, the number of dragon balls will increase unexpectedly, so it's too difficu ...