如何用css制作有趣的按钮
作者:麦子翻译 来源:cssbar.cn 发布时间:2008-03-17 13:54:00
标签:按钮,css,图片
这个技巧将教你如何用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
0
投稿
猜你喜欢
- 1。在Asp页面首部<head>加入 Response.Buffer =
- 流程,通俗来讲,就是许多人,在做一系列的事情时,怎样相互协调,安排好这一系列事情的先后顺序,有什么事先的约定,需要达到怎样的预期目标。在UE
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清
- [概 要] 这篇文章讨论常用的"sql注入"技术的细节,应用于流行的Ms IIS/ASP/SQL-Server平台。这里
- What's more important to your web site: pictures or text? If you h
- 所谓天赋(左脑和右脑)也就是你是否有艺术天赋,天赋也许是存在的,这主要在于人类左右脑的分工。左脑主要负责逻辑理解、语言、判断、分类、分析、推
- 如何做一个自己的QQ?这不是什么新鲜的东西,看看代码:refresh.htm<HTML><HEAD><titl
- 1.如果有ID字段,就是具有唯一性的字段 代码如下:delect table where id not in ( select max(id
- EXISTS该函数返回集合中第一个元素的索引,如果集合为空,返回NULLNULLNULLCollection.EXISTS(index)CO
- 最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份工
- <%on error resume nextdim conn,sql,rsset conn=Server.CreateObject(&
- InnoDB和MyISAM是在使用MySQL最常用的两个表类型,各有优缺点,视具体应用而定。下面是已知的两者之间的差别,仅供参考。1.Inn
- <!doctype><html><head><title>新闻图片轮换类</title
- 日常我们见的多的水印大都是做到图片里的,我依据html元素的css position定位作出这个 * 印,供大家参考<!DOCTYPE
- 索引( Index )是常见的数据库对象,它的设置好坏、使用是否得当,极大地影响数据库应用程序和Database 的性能。虽然有许多资料讲索
- 如何用SysOjects来获知数据库的信息?SysObjects中就保存了数据库中所有对象的信息,如:SELECT * FROM SysOb
- 前两天写了一篇《浅谈网站用户粘性的含义》的文章,有些个别网友问可否谈谈怎么样加强用户粘性的问题?虽然对此本人没有系统的理论做以支撑,但是既然
- 【原文地址】My "First Look at Orcas" Presentation 【原文发表日期】 Th
- 以前在工作中遇到一个问题,当表单发送的数据量很大时,就会报错。查阅MSDN了解到,原因是微软对用Request.Form()可接收的最大数据
- 使用cookie来判断来访者身份,是否是首次登陆, asp代码实例如下:< %@ LANGUAGE=&q