创建类似按钮的链接

按钮链接的创建方法

可以将锚的display属性设置为block,然后修改widht、height和其他属性来创建需要的样式和单击区域。锚是行内元素,只有在单击链接内容是才会激活,创建按钮链接可以拥有更大的单击区域。这种方法创建的链接显示为块级元素,单击块中任何地方都会激活链接。如果要使用这种技术,那么要确保元素是真正的链接,而不是更新服务器。链接应该只用于get请求,决不要用于post请求。

简单的翻转

使用 :hover伪类就可以创建翻转效果,而不需要JavaScript。在鼠标悬停时设置链接的背景和文本,实现简单的翻转效果

图像的翻转

修改背景颜色对于简单的按钮很合适,对于比较复杂的按钮,如正常状态、悬停状态、激活状态。则使用背景图像比较方便。使用固定宽度和高度的按钮,可以在CSS中设置显示的像素尺寸。同时可以把按钮文本放在图像上,然后使用大的负文本缩进隐藏锚文本,也可以创建特大的按钮图像,或者结合使用背景颜色和图像创建流式的或弹性的按钮,从而实现希望的文本效果。

Pixy样式的翻转

多图像方法的主要缺点是在浏览器第一次加载鼠标悬停的图像时有短暂的延迟。这会造成闪烁效果,让人感觉按钮有点儿反应迟钝。可以将鼠标悬停的图像作为背景应用于父元素,从而预先加载它们。但是,有另一种方法:不切换多个背景图像,而是使用一个图像并切换它的背景位置。使用单个图像的好处是减少了服务器请求的数量,而且可以将所有按钮的状态放在一个地方,这种方法称为pixy方法。

CSS精灵

多个服务器请求会对站点的性能产生显著的影响,所以所有按钮状态包含在一个图像中。CSS精灵是将许多不同的图标、按钮、或者图形的单个图像包含在一起,可以提高可维护性,减少Web浏览器发出的服务器请求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值