展会信息港展会大全

如何用css制作有趣的按钮(最新译文)
来源:互联网   发布日期:2016-03-25 16:03:32   浏览:1859次  

导读:滑动门为了让我们制作的按钮具有灵活性,我们必须要让背景图片自动适应按钮的文字的宽度,为此,我们要使用滑动门技术,将两张背景图片合并成一张背景图片。按钮将使用a标签和span标签,他们分别使...

滑动门

为了让我们制作的按钮具有灵活性,我们必须要让背景图片自动适应按钮的文字的宽度,为此,我们要使用滑动门技术,将两张背景图片合并成一张背景图片。按钮将使用a标签和span标签,他们分别使用背景图片的不同部分,html代码是这样的:

<a class="button" href="#"><span>search</span></a>

没有什么超乎寻常的事发生,对吗?我们需要设计出简单明了的按钮,下面是我的想法:

每张图将包含按钮的两个状态,既普通和按下。我们把两种状态的图片交替的垂直排列,这个css技巧可以不用任何javascript脚本来完成变化,下面我们将使用滑动门技术,为了让按钮自适应文字的宽度,我们将图片做的宽一些,比如300px,高24px:

spana

按钮样式

最后我们将用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;}

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港