html设置按钮不同状态的背景图片,CSS实例:创建一个鼠标感应换图片的按钮
CSS实例:创建一个鼠标感应换图片的按钮
互联网 发布时间:2009-04-02 19:35:17 作者:佚名 我要评论
网页制作Webjx文章简介:这个CSS教程将教你如何使用CSS创造一个漂亮的动态按钮 ,所谓动态,指的是默认状态和聚焦状态时背景按钮图片不一样.
这个CSS教程将教你如何使用CSS创造一个漂亮的动态按钮 ,所谓动态,指的是默认状态
这个CSS教程将教你如何使用CSS创造一个漂亮的动态按钮 ,所谓动态,指的是默认状态和聚焦状态时背景按钮图片不一样.
这个CSS教程将教你如何使用CSS创造一个漂亮的动态按钮 ,所谓动态,指的是默认状态和聚焦状态时背景按钮图片不一样,让我们看一下这是怎么完成的:
滑动门
因为我们希望我们的按钮是灵活的,我们将要作出的背景图像,可以文本自动改变大小。对于这一点,我们就用心爱的滑动门技术;两个互补图片所创造出来的幻觉,一个默认的,一个点击时出现的。
我们的按钮,将是一个基本的标签嵌套和 ,然后给每一个不同的层指定不同的背景图像。下面是HTML代码:
Bring world peace
接着,我们需要的是两张清晰的背景图片,分别使用在默认和聚焦状态下面:
我们将用这两张图片在CSS下面达到按钮的变幻效果,而不需要使用任何Javascript。背景图片应该设置一个合理的高度和宽度。比如这里,我们设定宽为300px,高为24px。
下面是分别是和的背景图片。
SPAN
A
样式化按钮
最后,我们需要一个CSS对按钮进行样式化 ,使这一切都联系在一起。因为我们要在此过程中,要对span和a元素增加到浮动属性,所以,我们对整下样式进行一个清除浮动:
.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; }
我们现在已经有了一个漂亮的按钮,但他还没有达到聚焦时所需要的转换效果,所以,我们还需要加入:
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 */ }
OK,大功告成。但需要注意的是,光靠上面的方法,不能正常运行于IE浏览器下面,所以,要让他在IE上也能工作,你需要在a标签里使用到:
…
翻译的不是太流畅,早知道的话用自己的话解释了。如果上面的看不明白,你可以点击这里查看英文原文教程:How to make sexy buttons with CSS。
相关文章
这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-13
这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-10-12
这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了CSS两种常用的封装示例,帮助大家更好的利用CSS制作网页,感兴趣的朋友可以了解下2020-10-12
这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章给大家介绍了CSS中width和height的默认值auto与%案例,本文通过实例案例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-30
这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
最新评论
html设置按钮不同状态的背景图片,CSS实例:创建一个鼠标感应换图片的按钮相关推荐
- css按钮大小固定,在CSS中创建一个固定宽度的按钮
我有几个可变宽度的按钮,我希望它们都是一定的宽度.当我尝试添加width: 150px;时,它不起作用.如何创建这些全部具有设定宽度的按钮?在CSS中创建一个固定宽度的按钮 HTML Lorem Lo ...
- java创建一个图片_Java 创建一个简单的验证码图片
代码如下: package lixin.gan.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2 ...
- php 鼠标点击图片放大,css3如何实现鼠标放上图片放大?(附代码)
在css3的学习中,我们会经常做一些小的动画效果,这感觉非常有趣,所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果,有兴趣的小伙伴可以看一下. 我们都知道css3中增加了一个tran ...
- 背景的css代码,创建炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 为什么? 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. ...
- html如何让图片慢慢放大,CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)...
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
- 鼠标滑动事件(鼠标经过换图片)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?本文主要 ...
- php为图片添加渐变背景,HTML_CSS实例:通过定义渐变边框给图片加阴影,一般我们可以使用背景图的方 - phpStudy...
CSS实例:通过定义渐变边框给图片加阴影 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现 代码: ...
- PS设计漂亮网站主页图片的实例教程
制作一个好的网页,需要花费大量的时间,包含的内容也是非常多的,其中有按钮.横幅.图标及其它素材等.制作的时候先规划好大致的框架,然后由上至下慢慢细化各部分的内容,注意好整体搭配.最终效果 一.在我们打 ...
- apicloud 预览图片_APICloud(三):预览图片
上一篇说的选择图片,且显示图片的img标签的父级A标签每个都添加了onclick事件previewThePic,该事件用来预览图片.且所有的A标签都添加在picList的div中.(PS:先说好层级关 ...
最新文章
- ADAS虚拟车道边界生成
- mysql 普通索引和唯一索引_MySQL 普通索引和唯一索引的区别
- 如何破除“唯论文”?详解伯克利“科研重工业模式”的成功经验
- window7共享xp或者2003的文件设置
- Spark DStream相关操作
- 做技术知道了哪些事情代表自己成熟了?
- [转]Java5泛型的用法,T.class的获取和为擦拭法站台
- .NET进阶系列之一:C#正则表达式整理备忘
- linux系统mysql创建表,Linux系统下手动新建数据库
- brave+kafka+zipkin+cassandra搭建分布式链路跟踪系统
- EPLAN P2.7安装教程
- 2000-2018年各省研发投入面板数据
- 术语-PM:PM/项目管理 百科
- 财务机器人正式上岗,一个机器顶40个人!
- 独立站推广引流的8个渠道
- 2022年河南省高职单招(综合素质)考试冲刺试题及答案
- c语言编写虚拟光驱软件下载,虚拟光驱(LZZ Virtual Drive)
- 【Web技术】1118- 图片防盗链的实现既然如此简单
- 【软件安装】WIN10 + Tensorflow1.12 C++接口 + Cmake编译失败 + Bazel编译成功 + C++接口
- 警用宽窄带融合技术国际学术交流会成功召开
热门文章
- 【图像融合】基于matlab GUI小波变换图像融合(带面板)【含Matlab源码 700期】
- 【锂电池健康状态预测】基于matlab BP神经网络锂电池健康状态预测【含Matlab源码 688期】
- 【TSP】基于matlab混合粒子群算法求解旅行商问题【含Matlab源码 397期】
- python智慧树判断题_智慧树_大数据分析的python基础_判断题答案
- 监听程序当前无法识别连接描述符中请求的服务_Linux I/O复用中select poll epoll模型的介绍及其优缺点的比较...
- excel二极管伏安特性曲线_【电子知识点】半导体二极管amp;三极管
- 不平衡数据集_我们的不平衡数据集
- html按钮美好,崛起中的九大HTML5开发工具
- innodb 删除隐藏列_MySQL进阶之InnoDB事务原子性实现原理
- c语言中Oo是什么进制整数字,C语言中的大小端存储及原码补码反码的运算关系 %d %u...