2.CSS图像绘制之：菜单按钮

一、HTML

<a href="">Menu</a>

二、CSS

/*使页面背景显示为绿色*/

body {

margin:50px;

font-family:arial;

background:#fbfbfb;

}

a{

text-decoration:none;

color:#999;

/*使文字右移，为图标腾出显示空间*/

text-indent:1.2em;

  font-size:32px;

display:block;

/*使文字垂直居中*/

    line-height:1;

position:relative;

}
/*绘制三图标*/

a::after{

content:'';

position:absolute;

left:0;

top:-4px;

width:.75em;

    /*绘制三横*/

box-shadow: 0 10px 0 2px #999,0 20px 0 2px #999,0 30px 0 2px #999;

}

a:hover{

color:#2ECC71;

}

a:hover::after{

box-shadow: 0 10px 0 2px #2ECC71,0 20px 0 2px #2ECC71, 0 30px 0 2px #2ECC71;

}