这个技巧将教你如何用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像素 */
}
所有的都完成了,点击查看效果。
相关推荐
纯css制作的精美按钮,绝对漂亮 纯css制作的精美按钮,绝对漂亮
CSS制作 开关按钮(按下去、弹起来).zip
CSS经典圆形按钮
CSS简单大气按钮
初学css,使用css和图片制作鼠标移上去和移开的变色效果
CSS样式按钮CSS样式按钮CSS样式按钮
单纯css3做的各种炫丽按钮,特效按钮,会呼吸的按钮,颜色渐变, 直接通过css3绘制出特殊效果,使用css的动画技术实现的简单例子
css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头
这个按钮需要配合JS和CSS才能使用,效果非常漂亮,而且有背景图片,压缩包里都有了。
css按钮样式
CSS制作 (亮灯)开关 按钮.zip
使用纯 CSS 设计3D按钮使用纯 CSS 设计3D按钮
纯css3 gradient属性制作6种渐变色的按钮样式
之前我分享过一些时尚的CSS3动画按钮,比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合,该CSS3按钮一共有5种不同的风格,有几款还有3D立体...
jQuery CSS制作超酷的动态按钮
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮 50个漂亮的用css修饰的按钮
css3制作checkbox单选按钮美化代码是一款勾选按钮美化,单选按钮美化效果代码。
很久没有向大家分享关于CSS3按钮的动画特效了,今天就给大家带来8款超酷而实用的CSS3按钮动画,由于google字体服务被屏蔽的缘故,所以你在截图上看到的字体和实际演示会有所差异。一起来看看这些CSS3按钮吧。 1、CSS...