原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

        .btn a{text-decoration:none;}

        .btn{display: inline-block; background: url(s_btn.png) no-repeat 0 0; height: 22px; line-height: 22px; color: #666; vertical-align:top;}

        .btn i{display:block;font-style: normal; font-size: 12px; padding: 0 10px; background:url(s_btn.png) no-repeat right -22px; }

        .btn:hover{text-decoration: none;color:#4c8136;background-position: 0 -44px;}

        .btn:hover i{background-position: right -66px;}

        .btn:active{background-position: 0 -88px;}

        .btn:active i{background-position: right -110px;}

        .btn_disabled, .btn_disabled:hover{background: url(../img/s_btn.png) no-repeat 0 -132px;cursor: default;}

        .btn_disabled i, .btn_disabled:hover i, .s_btn_disabled:active i{background-position: right -154px;color:#999;}

        </style>

    </head>

    <body>

        <a href="#" class="btn"> <i>这是按钮</i> </a>

        <a href="#" class="btn"> <i>按钮</i> </a>

    </body>

</html>

效果：

css按钮自适应的更多相关文章

  1. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  2. 常见css垂直自适应布局（css解决方法）

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  3. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  5. css实现自适应屏幕高度；

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  6. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  7. 演示：纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. css网页自适应-2

    昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座 ...

  9. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

随机推荐

  1. DevExpress MessageBox 弹出框 底层类

    效果图: 前台调用: //图一的前台调用 MessageBox.Show("测试", "标题", MessageBoxButtons.OK); //图二的前台调 ...

  2. JBPM流程实例（PI）Process Instance

    /** * 流程实例 *    *  启动流程实例 *    *  完成任务 *    *  查询 *      *  查询流程实例 *      *  查询任务 *          *  查询正在 ...

  3. javabean以及内省技术详解（转）

    一.关于javabean javabean是固定写法的java类 书写格式为: 1)必须有无参构造函数 2)属性必须私有, 我们称为字段 3)提供标准的getter和setter 例: name 字段 ...

  4. 【转】ST05

    一. SQL Trace 通过SQL跟踪,可以具体查询数据来源于哪些数据库表, 例如:可以查询某个交易(或几个交易)所涉及的数据库表. 为了减少在最终查询结果的工作量,要在屏幕显示你所要显示的数据的前 ...

  5. Windows性能计数器--磁盘性能分析Disk

    Physical Disk: 单次IO大小 Avg.Disk Bytes/Read Avg.Disk Bytes/Write IO响应时间 Avg.Disk sec/Read Avg.Disk sec ...

  6. Matplot中文乱码完美解决方式

    一.改动matplotlibrc文件 (永久解决方式) 1. 定位matplotlibrc文件 该文件位于[python_install_dir]\Lib\site-packages\matplotl ...

  7. 使用viewpager实现广告条轮询的效果

    先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter ...

  8. android92 aidl远程进程通信

    05项目RemoteService.java package com.itheima.remoteservice; //05项目 import com.itheima.remoteservice.Pu ...

  9. 玩转Android之数据库框架ActiveAndroid的使用

    ActiveAndroid是一个开源的数据库框架,使我们在Android中使用数据库变得更为简单,今天我们就来看看这个数据库框架的使用. 1.引入ActiveAndroid 首先创建我们自己的项目,在 ...

  10. C# 解决DrawImage绘制图片拉伸产生渐变

    ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing. ...