一个清爽的button样式

最新推荐文章于 2023-04-27 20:03:51 发布

_王川

最新推荐文章于 2023-04-27 20:03:51 发布

阅读量1.1k

点赞数

分类专栏：网站制作文章标签：网站制作

本文链接：https://blog.csdn.net/starcuan/article/details/21238759

版权

网站制作专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果如下：

<html>
<head>
    <title></title>
    <style type="text/css">
        .clear { /* generic container (i.e. div) for floating buttons */
            overflow: hidden;
            width: 100%;
        }

        a.button {
            background: transparent url('IMG/bg_button_a.gif') no-repeat scroll top right;
            color: #444;
            display: block;
            float: left;
            font: normal 12px arial, sans-serif;
            height: 24px;
            margin-right: 6px;
            padding-right: 18px; /* sliding doors padding */
            text-decoration: none;
        }

        a.button span 
        {
            background: transparent url('IMG/bg_button_span.gif') no-repeat;
            display: block;
            line-height: 14px;
            padding: 5px 0 5px 18px;
        } 

        a.button:active {
            background-position: bottom right;
            color: #000;
            outline: none; /* hide dotted outline in Firefox */
        }

        a.button:active span {
            background-position: bottom left;
            padding: 6px 0 4px 18px; /* push text down 1px */
        } 

    </style>
</head>
<body>
    <a class="button" href="javascript:void(0);"><span>按钮</span></a>
</body>
</html>

这是IMG文件夹下的两张图片：

bg_button_a:

bg_button_span:

_王川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个清爽的button样式

.clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%; } a.button { background: transparent url('IMG/bg_bu
复制链接

扫一扫