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

  • 时间:2018-11-15 22:54 作者:爱码农 来源:爱码农 阅读:146
  • 扫一扫,手机访问
摘要:在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)
最新发布的资讯信息
【系统环境|】什么是HTML5前端开发?HTML5前端要学哪些技术?(2019-07-21 11:47)
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部