CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）
作者:admin 时间:2019-9-21 17:40:57 浏览:8241CSS悬停效果按钮（鼠标移到按钮上变成其他颜色），是一个非常常见的按钮效果，今天通过一个简单的实例来给大家介绍如何用css来实现这一效果。
CSS悬停效果按钮
CSS样式
按钮样式包含以下这些类：
- a.jbutton{
- background: transparent url(buttonleft.png) no-repeat top left;
- display: block;
- float: left;
- font: 22px "Tahoma";
- line-height: 49px; /* 这个值+8px应该等于按钮的高度 */
- height: 57px;
- padding-left: 9px; /* 图像左侧部分 */
- 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; /* 在此处将右填充设置为上面的“padding-left”值 */
- text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
- }
- a.jbutton:link, a.jbutton:visited{
- color: #F0F0F0; /* 按钮文本颜色 */
- }
- a.jbutton:hover{
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
- opacity: 0.8;
- -moz-opacity: 0.8;
- }
- a.jbutton:hover span{
- color: #FFFFFF;
- }
我们有两张图片，按钮的左边和右边。根据文本的大小，按钮将展开（最多200像素）。
我还添加了一些文字阴影。
HTML标记
HTML非常简单：
- <a class="jbutton"><span>Ask a question</span></a>
x
完整HTML代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
- <html>
- <head>
- <title>JButton</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style type="text/css">
- a.jbutton{
- background: transparent url(buttonleft.png) no-repeat top left;
- display: block;
- float: left;
- font: 22px "Tahoma";
- line-height: 49px; /* 这个值+8px应该等于按钮的高度 */
- height: 57px;
- padding-left: 9px; /* 图像左侧部分 */
- 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; /* 在此处将右填充设置为上面的“padding-left”值 */
- text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
- }
- a.jbutton:link, a.jbutton:visited{
- color: #F0F0F0; /* 按钮文本颜色 */
- }
- a.jbutton:hover{
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
- opacity: 0.8;
- -moz-opacity: 0.8;
- }
- a.jbutton:hover span{
- color: #FFFFFF;
- }
- </style>
- </head>
- <body>
- <a class="jbutton"><span>Ask a question</span></a>
- </body>
- </html>
_henghost.gif)
相关文章
x
