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

  • 时间:2018-11-15 22:54 作者:爱码农 来源:爱码农 阅读:230
  • 扫一扫,手机访问
摘要:在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)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部