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. 关于微信小程序的一点经验

    2018年的11月份,自己做微信小程序相关的项目已经有四个月,这四个月自己走过很多弯路,也学到了不少经验,下面就一一总结: 一,微信小程序的radio组件是可以改变按钮样式的(比如大小,颜色等等) 改 ...

  2. 2、使用断言(json assertion)

    1.假设现在有一个服务端的返回数据(需要测试的)为:HTTP/1.1 200 OK,要测试的响应字段勾选Response Headers,模式匹配规则选择Substring,把该响应断言命名为Http ...

  3. 小程序后台隐藏后 socket 无法重新连接

    小程序后台隐藏后 socket 无法重新连接 连接时 fail 回调函数的事件参数:connectSocket:fail:jsapi has no permission,event=createSoc ...

  4. vueThink框架搭建与填坑(new)

    自己跟着官网搭建vueThink框架,发现github上文档有很多坑.所以总结一下(仅针对WIN端下载使用) 1.安装node.js 前端部分是基于node.js上运行的,所以必须先安装node.js ...

  5. 数据结构和算法(Golang实现)(26)查找算法-哈希表

    哈希表:散列查找 一.线性查找 我们要通过一个键key来查找相应的值value.有一种最简单的方式,就是将键值对存放在链表里,然后遍历链表来查找是否存在key,存在则更新键对应的值,不存在则将键值对链 ...

  6. 360众测考试 Drupal 漏洞 CVE-2018-7600 远程代码执行-复现

    0x00 前言 昨天360众测遇到的一个题 今天自己搭环境复现一下,希望对大家有帮助 0x01 漏洞简介 Drupal是一个开源内容管理系统(CMS),全球超过100万个网站(包括政府,电子零售,企业 ...

  7. AJ学IOS 之微博项目实战(11)发送微博自定义TextView实现带占位文字

    AJ分享,必须精品 一:效果 二:代码: 由于系统自带的UITextField:和UITextView:不能满足我们的需求,所以我们需要自己设计一个. UITextField: 1.文字永远是一行,不 ...

  8. 关于gpu版本的tensorflow+anaconda+jupyter的一些安装问题(持续更新)

    关于anaconda安装,虽然清华镜像站资源很丰富,但是不知道是网络还是运气的问题,用这个路径安装的时候总是出现文件丢失.具体表现可能是anaconda prompt 找不到,conda命令无效等问题 ...

  9. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(二)之Introduction to Objects

    The genesis of the computer revolution was a machine. The genesis of out programming languages thus ...

  10. centos7用户管理及root忘记密码恢复

    查看用户相关命令:#id 用户和组的信息#whoami #查看当前有效用户名#who #显示目前登入系统的用户信息.#w # w 命令用于显示已经登陆系统的用户列表#users #用于显示当前登录系统 ...