如何用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
投稿
猜你喜欢
- python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理。有一点需要清楚
- 下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件 下面就把我生成的TreeView展
- 在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 test 目录, 用来存放模拟的 js
- 接下来我利用一点空余时间发一个函数里面包含和添加和删除功能。实验的架构可以使用IIS.5WEB服务器ACCESS数据库。这个我其实不用说的很
- 在使用ASP来进行后端的数据合法性校验的时候,有些人为满足不同环境下面的数据校验,编写了很多的函数来实现,比如,我们想要校验用户输入的URL
- numpy对数组求平均时忽略nan值在对numpy数组求平均np.mean()或者求数组中最大最小值np.max()/np.min()时,如
- python最值与下标最大值的下标winner = np.argmax(scores)多个最大值的下标(np.argwhere返回数组中非0
- 1、切片使用切片来实现列表的倒序排序,mylist[start:end:step],不改变原列表。#!/usr/bin/env python
- 为什么需要线程锁当我们访问一些特殊的数据时,需要保证该数据的原子性,比如: 文章的阅读量、文章的点赞量等。我们必须要确保这些共享数据必须是原
- 在来回切换中英文输入法的时候连按两下shift总是会蹦出来全局搜索框真的很是麻烦,现在是把这个框给禁用掉1.按ctrl+shift+a,弹出
- 现在Django 3.0附带了对ASGI的支持,将Websockets添加到Django应用中不需要任何额外的依赖关系。 在本文中,您将学习
- 一、项目说明在日常生活中,我们经常会存取一些朋友们的丑照,在这个项目中,我们以萌萌哒的熊猫头作为背景,然后试着在背景图上加入朋友们的照片。效
- MVC模式MVC, 全名Model View Controller, 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Mo
- 前言:流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的“经脉”。Go语言中最常用的流程控制有if和for,
- 1、使用empty方法创建数组该方式可以创建一个空数组,dtype可以指定随机数的类型,否则随机采用一种类型生成随机数。import num
- 昨天晚上在家里把WM设计好的好台界面做成Html,在家里只用IE8和FF做了测试,感觉还行,除了感觉IE8还不成熟,渲染比较慢且不稳定外,标
- PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、Proje
- win10系统本地安装MySQL8.0.20,亲测可用,也是参考了其他大神的操作1. 下载Mysql ,官网下载地址:MySQL官网:链接直
- 本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下要实现的效果如下:<!DOCTYP
- 我想把本篇作为css基础教程的序曲,从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分,单独发表,其间可能会插