CSS-css 按钮背景样式

Web程序数据库 Web程序数据库 主题:1214 回复:2505

CSS-css 按钮背景样式

晚风撩人 发布于 2017-05-30 字数 332 浏览 1038 回复 2

我要做的事很多按钮 边角是圆角 按钮宽度不一样
背景图片样式如第一个
美工把图截成三段让我平铺,我想问怎么做 css代码怎么写

请输入图片描述

请输入图片描述

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

归属感 2017-08-04 2 楼

实现的效果图:

只需要两段就可以了,左边的图片需要比较宽,所需要的图片:

html代码:

<a href="#" class="button">
    <span class="button-left">
        <span class="button-text">按钮</span>
    </span>
</a>
<a href="#" class="button">
    <span class="button-left">
        <span class="button-text">我是按钮</span>
    </span>
</a>
<a href="#" class="button">
    <span class="button-left">
        <span class="button-text">我是一个按钮</span>
    </span>
</a>

css代码:

a.button {
    color: #444;
    background: url('images/button_right.png') no-repeat top right;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    height: 24px;
    padding-right: 18px;
    cursor: pointer;
}
a.button span.button-left {
    display: block;
    background: url('images/button_left.png') no-repeat top left;
    padding: 4px 0px 4px 18px;
    line-height: 16px;
    height: 16px;
}
a.button span.button-text {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 0px;
}
a:hover.button {
    background-position: bottom right;
}
a:hover.button span.button-left {
    background-position: bottom left;
}

项目中应用,可以写成jquery插件将:

  <a href="#" class="button">按钮</a>

自动生成以下格式就可以了:

  <a href="#" class="button">
<span class="button-left">
<span class="button-text">按钮</span>
</span>
</a>

归属感 2017-05-30 1 楼

像你的设计是无需切图平铺的,会多请求一次图片,加载慢的话体验还不舒服,用css直接实现吧:

 <a href="#" class="button">
按钮名称
</a>

css:

 a.button{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #666;background:#blue;background:-moz-linear-gradient(center top, #FAFAFA 0px, #DDDDDD 100%) repeat-x scroll 0 0 transparent}

a.button:hover{-moz-linear-gradient(center top, #5AB4EB 0px, #32A0EB 100%) repeat-x;border:1px solid #333;}