关闭

圆角按钮CSS实现

355人阅读 评论(0) 收藏 举报
分类:
<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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    博客专栏
    个人资料
    • 访问:597517次
    • 积分:11250
    • 等级:
    • 排名:第1442名
    • 原创:455篇
    • 转载:542篇
    • 译文:3篇
    • 评论:36条
    文章分类
    最新评论