【原创】web开发中按钮的制作妙法

作者：caoxicao
出处：http://blog.csdn.net/caoxicao

        在web开发中，经常要用到格式统一的按钮，如果每个按钮都用绘图工具制作的话，费时费力。我们可以结合CSS的特性，只要根据需要制作几个背景即可实现绝大部分按钮的制作使用。
图一是我们通常制作的按钮图片也是我们利用本文的方法制作出的按钮的效果。

图二是我们即将利用的按钮背景。



CSS应该这样写
.input0
{
    BORDER-RIGHT: 0px;
    PADDING-RIGHT: 5px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    PADDING-LEFT: 5px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg0.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 39px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input1
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg1.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 62px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input2
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg2.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 82px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input3
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg3.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 99px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input4
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg4.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 150px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}

这样我们就只要使用下面的语句就可以得到自己需要的button了。

<input type=button class="input2" value="这是按钮">

怎么样？既可以做到风格统一，又可以省时省力，不错吧！

文中代码下载：下载