【翻译】怎样使用css制作迷人的button

英文原文：How to make sexy buttons with css
作者：Alex

这是一个教程，作者Alex一步步地叫我们怎样使用css来制作一个迷人的按钮，看后觉得挺好，很想大家都看看，翻译的可能稍有不妥，望谅解……

这个教程将要教会你使用css来制作非常好看的按钮（包括不同的点击状态）。动态的按钮节省了您大量的花在画图的时间。

其实你也可以制作出来这样漂亮的按钮的，只需要跟着我们的教程就可以了：

第一步：滑动门

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

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

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

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

普通状态下按下状态

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

SPAN　　　　　　　　　　　　　　　　　　　　A

第二步：为按钮加上样式

最后，我们需要使用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浏览器里面点击这个按钮的时候，你会发现点击释放之后按钮不会再回到原来的状态。为了避免这个ie里面的问题，我们需要在a标签里面加上一点点的javascript脚本。

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

欢迎反馈

真心希望你能够喜欢这个教程并且迫不及待想要自己亲手制作一个这样的漂亮按钮。如果你有什么想法和建议，一定要让我知道，你可以给我发邮件info@oscaralexander.com。当然，你如果学会了并且把它运用到实际，我非常高兴。

转载于:https://www.cnblogs.com/xiaoheng1991/archive/2010/10/05/1844421.html

【翻译】怎样使用css制作迷人的button相关推荐

如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...
php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
JavaFX Button常用相关属性和制作多边形按钮Button
Button常用相关属性 pickOnBoundsProperty (pick On Bounds) 表示组件的鼠标事件在边界范围处理方式,如果 pickOnBounds为true,则通过与该节点的边 ...
运用HTML和CSS制作聚美优品注册整体界面
运用HTML和CSS制作聚美优品注册整体界面聚美优品的界面一向很讨广大客户的喜爱,好看却不繁杂,下面大家看下本次将制作的界面看到网页的第一件事就是想布局,如何把整个网页中各个元素进行包装分化.总体 ...
使用CSS制作下拉菜单样式
CSS制作下拉菜单制作tooltip显示形式代码示例实现原理 HTML 部分 CSS 部分制作可点击的下拉菜单实现原理代码示例 Appdex 制作tooltip显示形式代码示例 < ...

【翻译】怎样使用css制作迷人的button

【翻译】怎样使用css制作迷人的button相关推荐

最新文章

热门文章