原理：利用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. 前景还是“钱景”——MM应用引擎的自我博弈

    纵观当前的移动互联网发展态势,巨大的商机已经展露无遗,各个领域的企业及个人对于APP的开发如火如荼,许多APP从诞生伊始,就面临着软件开发的专业性,商业模式的模糊性,以及市场推广的艰巨性三个巨大难题, ...

  2. oc学习之路----代理模式2-使用步骤

    之前已经写过一个个人关于代理模式的一些看法,现在就来总结一下使用代理模式的步骤吧. 1.先搞清楚谁是谁的代理(delegate) ● 2.定义代理协议,协议名称的命名规范:控件类名 + Delegat ...

  3. JNI 技术与 Android 应用

    1. 什么是 JNI JNI是Java Native Interface的缩写.从Java 1.1开始,JNI标准成为java平台的一部分,它允许Java和其他语言进行交互.JNI一开始为C和C++而 ...

  4. MySQL check the manual that corresponds to your MySQL server version for the right syntax错误

    地化GO的时候一直遇到一个错误就是check the manual that corresponds to your MySQL server version for the right syntax ...

  5. java20 创建服务器：ServerSocket

    创建服务器:ServerSocket import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...

  6. eclipse下修改项目名导致tomcat内发布名不一致的解决方法 .

    eclipse下修改项目名导致tomcat内发布名不一致的解决方法 . ------------------------------------------------------- 解决方案: 直接 ...

  7. java编译环境

    系统环境变量: path D:\Program Files\Java\jdk1.7.0_45\bin (若里面已经有内容,前面加一个分号) 在c盘当前目录,能编译d盘的文件吗----能 javac D ...

  8. [转]使用Beaglebone Black的SPI

    分类: Beaglebone Black2013-11-24 18:21 678人阅读 评论(6) 收藏 举报 beaglebone blackbeagleboneSPIdevice tree   目 ...

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

  10. Android（java）学习笔记167：Java中操作文件的类介绍（File + IO流）

    1.File类:对硬盘上的文件和目录进行操作的类.    File类是文件和目录路径名抽象表现形式  构造函数:        1) File(String pathname)       Creat ...