<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>title>
<style type="text/css">
.box {
width: 100pxheight: 100pxposition: relative
}
.box a {
width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */
}
.box a:hover {
width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1
}
CSS3代码
随着HTML5/CSS3技术日趋成熟，现如今被越来越多的网站广泛的运用。模板之家代码频道为大家收集整理最新的CSS3按钮代码，CSS3菜单代码，CSS3特效代码等供大家学习交流，好的代码是学习进步的基石同时也可以在项目中得以运用。
你按钮上都没写class类怎么用.button来控制这个按钮的样式呢你可以用 input[type="button"] {}来选择这个所有的<input type="button" >这些按钮
或者你还想用上面的那种写法，你可以这么改
<input type="button" class="button" name="caigou" id="caigou" value="采购" style="width:50pxheight:50px"/>
<input type="button" class="button" name="xiaoshou" id="xiaoshou" value="销售" />
给每个按钮加上一个button的类这样你就可以用 .button 来控制了
或则楼上的说法也可以，虽然有点烦，按钮的另一种写法是<button>销售</button>如果是这样写的话，就直接用 button{}来控制这个按钮的样式
汉堡按钮就是几个css动画，加上javascript的onclick事件的绑定，很简单的。我给你写了一个，你看看效果吧。这个用了css的媒体查询功能，电脑上看得时候要把浏览器窗口缩小才看得到效果。
文件:index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/mp.css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="viewport" content="width=10,initial-scale=1,user-scalable=no">
<meta name="applicable-device" content="pc,mobile" />
</head>
<body>
<div id="hb" onclick="hb()">
<div id="hb1"></div>
<div id="hb2"></div>
<div id="hb3"></div>
</div>
<ul id="ul1">
<li><a href="index.html">首页</a></li>
<li><a href="lmone/lmone.html">$lanmu1$</a></li>
<li><a href="lmtwo/lmtwo.html">$lanmu2$</a></li>
<li><a href="lmthree/lmthree.html">$lanmu3$</a></li>
<li><a href="lmfour/lmfour.html">$lanmu4$</a></li>
<li><a href="lmfive/lmfive.html">$lanmu5$</a></li>
</ul>
<script type="text/javascript" src="js/hb.js"></script>
</body>
</html>
文件：mp.css
/*手机*/
@media screen and (max-width:700px){
*{
margin:0
padding:0
}
html,body{
overflow:hidden
overflow-y:auto
}
a{
text-decoration:none
color:gray
}
body{
background:rgb(233,234,237)
}
/*汉堡按钮*/
#hb{
float:left
width:20%
height:60px
background:rgb(28,35,39)
overflow:hidden
}
#hb1,#hb2,#hb3{
position:relative
clear:both
width:100%
height:9px
background:gray
}
#hb1{
top:8%
}
#hb2{
top:25%
}
#hb3{
top:43%
}
@keyframes hb1
{
from {
transform:rotate(0deg)
top:8%
}
to {
transform:rotate(45deg)
top:40%
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(0deg)
top:8%
}
to {
transform:rotate(45deg)
top:40%
}
}
@keyframes hb11
{
from {
transform:rotate(45deg)
top:40%
}
to {
transform:rotate(0deg)
top:8%
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(45deg)
top:40%
}
to {
transform:rotate(0deg)
top:8%
}
}
@keyframes hb2
{
from {
transform:rotate(0deg)
}
to {
transform:rotate(-45deg)
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(0deg)
}
to {
transform:rotate(-45deg)
}
}
@keyframes hb22
{
from {
transform:rotate(-45deg)
}
to {
transform:rotate(0deg)
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
transform:rotate(-45deg)
}
to {
transform:rotate(0deg)
}
}
#ul1{
float:left
width:95%
height:15em
background:rgb(28,35,39)
margin-top:1%
padding-left:5%
display:none
}
@keyframes ul1
{
from {
height:0
}
to {
height:15em
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
height:0
}
to {
height:15em
}
}
@keyframes ul11
{
from {
height:15em
}
to {
height:0
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
height:15em
}
to {
height:0
}
}
#ul1 li{
display:inline
float:left
width:95%
margin-top:15px
color:white
}
#ul1 li:hover{
background:gray
}
#ul1 li a{
color:white
}
}
文件：hb.js
hb1=document.getElementById("hb1")
hb2=document.getElementById("hb2")
hb3=document.getElementById("hb3")
ul1=document.getElementById("ul1")
var js=0
function hb(){
if(js%2==0){
ul1.style.display="block"
ul1.style.animation="ul1 0.6s"
hb3.style.display="none"
hb1.style.animation="hb1 0.6s"
hb1.style.transform="rotate(45deg)"
setTimeout("hb1.style.top='40%'","600")
hb2.style.animation="hb2 0.6s"
hb2.style.transform="rotate(-45deg)"
}
if(js%2==1){
ul1.style.animation="ul11 0.6s"
setTimeout("ul1.style.display='none'","600")
setTimeout("hb3.style.display='block'","500")
hb1.style.animation="hb11 0.6s"
hb1.style.transform="rotate(0deg)"
setTimeout("hb1.style.top='8%'","600")
hb2.style.animation="hb22 0.6s"
setTimeout("hb2.style.transform='rotate(0deg)'","600")
}
js=js+1
}
效果图片：
