原理：利用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. [一]初识Ajax

    是什么? 一种网页交换数据的技术 作用: 使页面局部刷新,获取后台数据 怎么做? 调用浏览器内置对象发送异步请求

  2. 配置ModSecurity防火墙与OWASP规则

    中文译文参考:http://netsecurity.51cto.com/art/201407/446264.htm 英文原文参考:http://resources.infosecinstitute.c ...

  3. SmartbBear给出的11条代码审查最佳实践

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:SmartbBear给出的11条代码审查最佳实践.

  4. 【JAVA - SSM】之MyBatis动态SQL

    动态SQL就是在SQL语句中添加一些标签,以完成某些逻辑.通常用到的动态SQL标签有<if>.<choose>.<where>.<trim>.<s ...

  5. 权限管理（java+struts2(自定义标签)实现）--------->全代码演示

    地址:http://blog.chinaunix.net/uid-24343152-id-3673026.html 最近由于项目不是很紧所以总结了之前做了n遍的权限管理功能.以便之后系统copy之用. ...

  6. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  7. hdu 4635 Strongly connected(Tarjan)

    做完后,看了解题报告,思路是一样的.我就直接粘过来吧 最终添加完边的图,肯定可以分成两个部X和Y,其中只有X到Y的边没有Y到X的边,那么要使得边数尽可能的多,则X部肯定是一个完全图,Y部也是,同时X部 ...

  8. 如何更改 RSA 的语言设置

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  9. ubuntu14.04 64bit 安装 &amp;&amp; 破解quartus13.0 记录

    安装文件:Quartus-13.0.0.156-linux.iso             Quartus-13.0.0.156-devices-1.iso 1.挂载:sudo mount -o lo ...

  10. careercup-递归和动态规划 9.7

    9.7 编写函数,实现许多图片编辑软件都支持的“填充颜色”功能.给定一个屏幕(以二维数组表示,元素为颜色值).一个点和一个新的颜色值,将新颜色值填入这个点的周围区域,直到原来的颜色值全部改变. 类似l ...