圆角按钮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实现的漂亮圆角按钮

http://www.6a8a.com/2011/biaodananniu_0707/2758.html 纯css实现的漂亮圆角按钮_网页代码站(www.6a8a.com) ...
  • zunguitiancheng
  • zunguitiancheng
  • 2015年10月30日 00:14
  • 1982

CSS实现按钮或文本框圆角效果

CSS实现按钮或文本框圆角效果,代码如下:     border-radius:4px;
  • john320
  • john320
  • 2015年12月16日 14:09
  • 495

css 按钮边框变圆角

//边框圆角 .radius6{-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-webkit-border-ra...
  • yyongsheng
  • yyongsheng
  • 2016年06月09日 21:48
  • 789

按钮圆角设置、html基础css引入

1、按钮圆角设置 .button{       display: inline-block;     position: relative;     margin: 10px;     text-de...
  • ycy0706
  • ycy0706
  • 2017年04月01日 16:20
  • 867

按钮左边是圆角,右边是方角

左边是圆角,右边是方角 .left_radius{ border-top-left-radius: 6px; border-top-right-radius: 0px; border-bott...
  • kouwoo
  • kouwoo
  • 2014年12月05日 09:52
  • 1936

IE7/IE8实现css圆角效果

HTML代码:         赵幸培 css代码: *{ margin:0; padding:0; } .zxp{ width:100px; height:100px; line-h...
  • zx_p24
  • zx_p24
  • 2016年10月11日 16:24
  • 2414

CSS圆角按钮

纯css实现的漂亮圆角效果的按钮丨芯晴网页特效丨CsrCode.Cn .a{float:left; border-width:1px 0; border-color:#bbbbbb; border-...
  • maoyuping
  • maoyuping
  • 2015年10月09日 14:53
  • 799

自定义控件(三)自定义圆角Button

自定义圆角Button,需两步:1.在drawable文件夹下新建 button_shape.xml文件 内容示例如下: ...
  • qq_16912257
  • qq_16912257
  • 2015年07月28日 21:10
  • 943

CSS实现自适应圆角矩阵——滑动门

css圆角矩形对于很多人来说,都觉得很难.在table中要实现圆角矩形我想很多人都会,而在css中要定义圆角矩形也并不难,不过要一个宽度不固定的框,事情变得有些复杂了。宽度不固定,就意味着这个框在水平...
  • lulalahappy123
  • lulalahappy123
  • 2015年04月18日 18:48
  • 682

Android 圆角的Button

原文:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380143fd3d1027fa3c215cc790e1...
  • LH806732
  • LH806732
  • 2014年03月14日 16:23
  • 17348
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆角按钮CSS实现
举报原因:
原因补充:

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