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. 1064 Complete Binary Search Tree (30分)(已知中序输出层序遍历)

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  2. Java引用的分类

    Java引用分为强引用.软引用.弱引用和虚引用. 强引用就是指在程序代码中普遍存在的,类似“Object obj = new Object()”这类的引用,只要强引用还存在,垃圾收集器永远不会回收掉被 ...

  3. (二) vim的Tabbar插件

    关闭Tabbar中一个buffer的技巧: 如果你使用Tabbar的同时还集成了某种窗口分割插件(如 Winmanager,NERDTree)或者vim处于分栏显示状态,这时你想用传统的 :bd 或 ...

  4. 加密采矿僵尸网路病毒还在蔓延! kinsing kdevtmpfsi redis yarn docker

    Hadoop yarn 加密采矿僵尸网路病毒还在继续蔓延! 解决步骤 如果你同样遇到了kdevtmpfsi异常进程,占用了非常高的CPU和出网带宽,影响到了你的正常业务,建议使用以下步骤解决 杀掉异常 ...

  5. 世界疫情app柱形图显示

    访问云服务器的mysql实现数据的获取.最后通过柱形图的形式将数据显示在页面上: 遇到的主要困难时对于云服务器的mysql连接本地的navicat之间事情,最后通过网上的各种解决办法完成了相关的内容. ...

  6. docker 相关操作

    docker-compose down //关闭所有容器 docker-compose up //开启所有容器 docker-compose restart //重启所有容器 单独更新某个容器时用脚本 ...

  7. CVPR2020文章汇总 | 点云处理、三维重建、姿态估计、SLAM、3D数据集等(12篇)

    作者:Tom Hardy Date:2020-04-15 来源:CVPR2020文章汇总 | 点云处理.三维重建.姿态估计.SLAM.3D数据集等(12篇) 1.PVN3D: A Deep Point ...

  8. DataAnalysis-SOP

    一.关于数据分析 a. 互联网最热职位:研发工程师.产品经理.人力资源.市场营销.运营.数据分析(供不应求) b. 数据分析的步骤:明确目的/思路.数据收集.数据处理.数据分析.数据展现 c. 数据分 ...

  9. 【论文笔记】张航和李沐等提出:ResNeSt: Split-Attention Networks(ResNet改进版本)

    github地址:https://github.com/zhanghang1989/ResNeSt 论文地址:https://hangzhang.org/files/resnest.pdf 核心就是: ...

  10. XML布局界面

    Android推荐使用XML布局文件来定义用户界面,而不是使用Java代码来开发用户界面,因此基础所有组件都提供了两种方式来控制组件的行为:1.在XML布局文件中通过XML属性进行控制:2.在Java ...