简明现代魔法 -> CSS层叠样式表 -> 制作一个人性化的CSS按钮

制作一个人性化的CSS按钮

2010-10-05

这个教程将要教会你使用css来制作非常好看的按钮(包括不同的点击状态)。动态的按钮节省了您大量的花在画图的时间。其实你也可以制作出来这样漂亮的按钮的,只需要跟着我们的教程就可以了。

效果演示

我们想使按钮可以灵活扩展,所以我们必须得让背景图片随着按钮上面的文字的扩展而扩展,所以,我们就必须要使用到可爱的滑动门技术:两张图片合作给人一种可以扩展的单张图片的假象。

我们的按钮是一个<a>标签内嵌一个<span>标签组成,a标签和span标签各自含有一张不同的背景图片,我们的html代码如下:

<a class="button" href="#"><span>Bring world peace</span></a>  

好像看似没有什么特别的,是吗?接下来,我们需要为我们按钮的按下前后状态设计不同的好看的样式,下面这个是我自己想的:

我们将会把按钮的这两种状态的背景图片合成在 一张图片上。如果要切换普通状态和按下两种状态,我们就只需要将这张背景图片的竖直方向的位置变化一下就可以了。这种以css为主的方法可使我们可以不是用javascript脚本儿完成按钮背景图片的切换。让我们吧这两张图片合并起来并作为我们的滑动门图片,我们把承装按钮文本的那个图片的宽度设置为300px(应该足够了吧^_^),图片的高度设置为24px。

最后,我们需要使用css将这些想法链接起来。我们可能需要把许多这样的按钮水平排成一行,所以我使用了浮动。

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('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('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 

注意:一定要保证span标签的竖直方向的padding(5px+5px)再加上line-height(14px)的总和是我们的button的高度24px。使用不同的padding意味着我们的按钮会有不同的高度。

这样我们一个漂亮的按钮就诞生了,但是当我们去点击它的时候我们并不能够获得很好的视觉上的反馈,交互性不好。所以,让我们在位这个按钮补上最后一笔:

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 */
} 

真是令人扫兴,当你在ie浏览器里面点击这个按钮的时候,你会发现点击释放之后按钮不会再回到原来的状态。为了避免这个ie里面的问题,我们需要在a标签里面加上一点点的javascript脚本。

<a class="button" href="#" onclick="this.blur();"> … </a>

假如你想使用这个按钮来提交表单,那你可以为这个a标签的click事件添加更多的方法。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们