原理：利用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. javascript中使用md5函数

    javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...

  2. win8 64位系统，安装JDK的步骤及其环境配置

    工具/原料 jdk-8u51-windows-x64.exe 下载地址:::http://www.cr173.com/soft/55503.html#address jdk 安装步骤 1:到oracl ...

  3. Delphi- 数据加密和解密

    Delphi进行数据加密,在数据库方面经常要使用到.从网上转载过来的,以后会经常会用到. 一.MD5加密算法 在C#/.Net里提供了MD5加密的类库.在Delphi中没有.只能自己建一个新的单位,将 ...

  4. 解决Debian-7.1下Chrome浏览器字体难看的问题

    首先在 Advance Setting 的 font 标签页下做如下配置: 然后在用户目录下创建 .fonts.conf 文件,内容如下: <?xml version='1.0'?> &l ...

  5. 一个tomcat究竟能接受多少并发

    maxThreads 对tomcat来说,每一个进来的请求(request)都需要一个线程,直到该请求结束.如果同时进来的请求多于当前可用的请求处理线程数,额外的线程就会被创建,直到到达配置的最大线程 ...

  6. Java RMI之介绍

    http://zh.wikipedia.org/wiki/Java_RMI Java远程方法调用,即Java RMI(Java Remote Method Invocation)是Java编程语言里, ...

  7. ios7自带的晃动效果

    ios7自带的晃动效果 by 伍雪颖 - (void)registerEffectForView:(UIView *)aView depth:(CGFloat)depth; { UIInterpola ...

  8. OpenOffice的安装与启动

    一.安装openOffice1.使用tar -xzvf OOo_3.2.0_LinuxIntel_install_wJRE_en-US.tar.gz解压缩后,会得到OOO320_m12_native_ ...

  9. Why String is immutable in Java ?--reference

    String is an immutable class in Java. An immutable class is simply a class whose instances cannot be ...

  10. JSTL-core核心代码标签库中的forEach,remove, forTokens,choose,when,otherwise,redirect 标签

    <%@ page language="java" import="java.util.*, cn.hncu.domain.*" pageEncoding= ...