原理：利用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. SRM566 1000pts

    绍一的模拟赛题 [题意] 小Z养了$

  2. C#Winform窗口特效源码(1)

    本文基于.Net开发,使用C#作为开发语言,分别包含以下效果: 移动无边框窗口.窗口移动限制(限制在屏幕内).桌面贴边自动隐藏(仿QQ隐藏窗口) 1.移动无边框窗口 采用了消息的方式,可以实现通过窗口 ...

  3. （翻译）什么是Java的永久代（PermGen）内存泄漏

    http://www.codelast.com/?p=7248 转载请注明出处:http://www.codelast.com/ 本文是我对这篇文章的翻译:What is a PermGen leak ...

  4. 服务框架HSF分析之一容器启动

    大家平时都在用这个服务框架.简单阅读了下代码,了解其原理可以方便解决一些常见hsf的问题.限于篇幅,整个分析将分几个系列发布.第一篇将简单介绍Hsf的启动和各组件之间关系. 一.  Hsf总体架构 这 ...

  5. Cocos2d-x 2.0 自适应多种分辨率

    转自:http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/ cocos2d-x 2.0 提供一个极 ...

  6. TRUNCATE TABLE 与 DELETE table 区别

    语法 TRUNCATE TABLE name;参数  TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行. TRUNCATE TABLE ...

  7. [转] Spring - Java Based Configuration

    PS: Spring boot注解,Configuration是生成一个config对象,@Bean指定对应的函数返回的是Bean对象,相当于XML定义,ConfigurationProperties ...

  8. 解锁Dagger2使用姿势（二） 之带你理解@Scope

    关于Dagger2使用的基础如果你还不了解,可以参考我的上一篇文章解锁Dagger2使用姿势(一),这有助于你理解本篇文章. OK,我们在上篇文章介绍另外Dagger2使用过程中四个基本的注解,分别是 ...

  9. Android（java）学习笔记142：使用Sqlite基本流程

  10. C#异常之（已有打开的与此 Command 相关联，已有打开的与此命令相关联的 DataReader，必须首先将它关闭。）

    异常提示:“System.InvalidOperationException”类型的异常在 System.Data.dll 中发生,但未在用户代码中进行处理  其他信息: 已有打开的与此 Comman ...