如何用css制作有趣的按钮
作者:麦子翻译 来源:cssbar.cn 时间:2008-03-17 13:54:00
这个技巧将教你如何用css做出漂亮的文本按钮,有活力的按钮将节省你很多制作图片的时间,也能让你一天的工作中成为一个快乐的人,让我们一起看看效果。
滑动门
为了让我们制作的按钮具有灵活性,我们必须要让背景图片自动适应按钮的文字的宽度,为此,我们要使用滑动门技术,将两张背景图片合并成一张背景图片。按钮将使用a标签和span标签,他们分别使用背景图片的不同部分,html代码是这样的:
<a class="button" href="#"><span>search</span></a>
没有什么超乎寻常的事发生,对吗?我们需要设计出简单明了的按钮,下面是我的想法:
每张图将包含按钮的两个状态,既普通和按下。我们把两种状态的图片交替的垂直排列,这个css技巧可以不用任何javascript脚本来完成变化,下面我们将使用滑动门技术,为了让按钮自适应文字的宽度,我们将图片做的宽一些,比如300px,高24px:
span a
按钮样式
最后我们将用css把这一切整合起来:
a.button { background: transparent url('images/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; text-decoration: none;}a.button span { background: transparent url('images/bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px;}
注意 span的上下padding值分别是5px和5px,line-height是14px,加起来正好是按钮的高度24px。用不同的padding值,意味着就要设置不同的height。
现在我们已经做好了一个漂亮的按钮了,但是,当我们按下的时候他没有任何变化,让我们完成最终的效果:
a.button:active { background-position: bottom right; color: #000; outline: none; /* 去掉在Firefox下四周的虚线 */}
a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* 让文字向下移1像素 */}
所有的都完成了,点击查看效果。
原文:http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
标签:按钮,css,图片
0
投稿
猜你喜欢
静态页面实现文章点击数统计的js方法
2008-01-23 19:17:00
从trim原型函数看js正则表达式的性能
2008-12-11 13:55:00
SQLServer中的切割字符串SplitString函数
2011-12-01 08:14:09
不受欢迎的“欢迎页”
2008-04-20 16:41:00
用javascript实现select的美化
2007-05-11 16:50:00
IE7 与 IE6 的模式窗口尺寸差异
2008-03-06 13:49:00
Oracle 函数大全[字符串函数,数学函数,日期函数]第1/4页
2009-03-04 10:56:00
FrontPage XP设计教程6——制作多媒体网页
2008-10-11 12:38:00
动易CMS:九个常见的错误原因分析及解决方法(ZT)
2008-07-01 12:40:00
asp中文件与文件夹常用处理函数(文件后缀、创建文件等)
2011-02-20 11:00:00
简单的网站页面有什么好处
2007-11-15 06:28:00
iframe 的用法与注意事项
2008-02-12 12:56:00
小技巧解决“FF不能读取outerHTML”的问题
2009-02-10 10:44:00
Javascript学习第一季 三
2008-06-27 13:08:00
一个js自动完成功能源码
2011-06-06 07:42:00
用ASP建立一个简单的聊天室
2007-09-21 12:43:00
CSS浏览器兼容方案
2008-06-10 12:21:00
PHP结构型模式之外观模式
2023-05-25 11:43:14
SQL Server 2005数据库批量更新解决办法
2009-04-11 16:12:00
简单仿LightBox效果
2008-09-19 21:35:00