圆角按钮CSS实现

原创 2015年11月19日 14:55:18
<html>
    <head>
    <title>圆角按钮CSS实现</title>
    <style type="text/css">
    a.l-btn span.l-btn-left{
    display:inline-block;
    background:url('http://www.codefans.net/jscss/demoimg/201306/button_span_bg.gif') no-repeat top left;
    padding:4px 0px 4px 18px;
    line-height:16px;
    height:16px;
    }
    a.l-btn{
    color:#444;
    background:url('http://www.codefans.net/jscss/demoimg/201306/button_a_bg.gif') no-repeat top right;
    font-size:12px;
    text-decoration:none;
    display:inline-block;
    zoom:1;
    height:24px;
    padding-right:18px;
    cursor:pointer;
    outline:none;
    }
    a.l-btn-plain span.l-btn-left{
    background:transparent;
    padding-left:5px;
    }
    a.l-btn span span.l-btn-text{
    display:inline-block;
    height:16px;
    line-height:16px;
    padding:0px;
    }
    .icon-add{
    background:url('http://www.codefans.net/jscss/demoimg/201306/edit_add.png') no-repeat;
    }
    </style>
    </head>
    <body>
    <a class="l-btn" href="#">
    <span class="l-btn-left">
    <span class="l-btn-text icon-add" style="padding-left: 20px;">Add</span>
    </span>
    </a>
    </body>
    </html>

相关文章推荐

纯css实现的质感圆角按钮

说明: 1、display:inline-block; 这个属性IE8和firefox3.0已经支持,IE6和IE7不支持,解决方法是*display:inline; zoom:1;原因如下: 使得...
  • comeonJ
  • comeonJ
  • 2011年10月30日 18:51
  • 925

CSS做的类似MSDN的圆角按钮

  • 2009年01月09日 09:30
  • 1KB
  • 下载

编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似

1、编写的页面  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core" prefix="c"%> http://www.w3.org/T...

css制作圆角按钮

http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml" xml:lang="en"> ...
  • comeonJ
  • comeonJ
  • 2011年10月30日 11:18
  • 1354

CSS3徽章按钮-圆角+渐变

CSS3按钮徽章支持 FF  CHrome "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS3徽章按钮...
  • moliyll
  • moliyll
  • 2012年05月29日 12:49
  • 563

漂亮的CSS3圆角按钮组合DEMO演示

蓝色 Rounded Medium Small  Button Tag绿色 Rounded Medium Small  Button Tag灰白 Rounded Medium Small  Butto...

css解决ios端按钮和输入框自带圆角的问题

请在这里查看示例 ☞ borderRadius示例问题重现在ios端,我们不想使用按钮或输入框自带的圆角样式,改如何取消呢?问题解决 源码如下 ...

纯CSS制作圆角按钮,不需图片,兼容各浏览器

纯CSS制作圆角按钮,不需图片,兼容各浏览器 .button { display: inline-block; position: relative; margin: 10px; pad...

Android 开发 圆角 Button 按钮 xml 实现

需求 及 效果图实现思路 在 drawable 新建两个 xml 文件, 这两个 xml 文件用 shape 实现了圆角效果. Note: 因为要让用户有按下去的效果体验, 所有...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆角按钮CSS实现
举报原因:
原因补充:

(最多只允许输入30个字)