带有鼠标悬停效果的CSS按钮

  • 时间:2018-11-15 22:54 作者:爱码农 来源:爱码农 阅读:115
  • 扫一扫,手机访问
摘要:在jquery主页上的“下载”按钮的启发下,我创立了一个鼠标悬停效果的按钮。它使用所有浏览器的不透明选项。您可以在这里看到一个演示:JButton演示。点击查看按钮的演示。下载zip,包含所有包含的文件:JButton。该按钮的样式由以下类组成:a.jbutton{ background: tran

在jquery主页上的“下载”按钮的启发下,我创立了一个鼠标悬停效果的按钮。它使用所有浏览器的不透明选项。您可以在这里看到一个演示:JButton演示。

带有鼠标悬停效果的CSS按钮

带有鼠标悬停效果的CSS按钮

点击查看按钮的演示。

下载zip,包含所有包含的文件:JButton。

该按钮的样式由以下类组成:

a.jbutton{
background: transparent url(buttonleft.png) no-repeat top left;
display: block;
float: left;
font: 22px "Tahoma";
line-height: 49px; /* This value + 8px should equal height of the button */
height: 57px;
padding-left: 9px; /* Left part of image */
text-decoration: none;
outline:none;
color:white;
cursor:pointer;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
-moz-opacity: 0.99;
}
a.jbutton span{
background: transparent url(buttonright.png) no-repeat top right;
display: block;
padding: 4px 9px 6px 0; /*Set right padding here to 'padding-left' value above*/
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a.jbutton:link, a.jbutton:visited{
color: #F0F0F0; /* button text color */
}
a.jbutton:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
}
a.jbutton:hover span{
color: #FFFFFF;
}

我们有两个图像,左边和右边的按钮。根据文本的大小,按钮将扩展(最多200px)。

我还增加了少量文本阴影,但在IE中不起作用。

html非常简单:

  Ask a question

这个特殊的角色是个问号,我只是为了好玩才加进去的。

享受吧!

  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部