[Html]
<! DOCTYPE html>
<Html>
<Head>
<Style>
A. a2 {line-height: 100px; text-align: center; text-decoration: none; background-color: #54ABE1; color: # fff; border: 1px solid darkgray; display: block; width: 100px; height: 100px; backgroud-color: red; position: relative; overflow: hidden ;}
A. a2 input {cursor: pointer; position: absolute; top:-10px; left:-10px; width: 200px; height: 200px; background: url (http://www.bkjia.com/uploadfile/2013/0329/20130329100312234.gif) transparent; border: 0 ;}
A. a2: hover {background-color: # 59595A ;}
</Style>
</Head>
<Body>
<Form action = "http://www.baidu.com/sss.html" method = "GET" target = "_ blank">
<A class = "a2" href = "javascript:;"> center display
<Input type = "submit" value = ""/>
</A>
</Form>
</Body>
</Html>
<! DOCTYPE html>
<Html>
<Head>
<Style>
A. a2 {line-height: 100px; text-align: center; text-decoration: none; background-color: #54ABE1; color: # fff; border: 1px solid darkgray; display: block; width: 100px; height: 100px; backgroud-color: red; position: relative; overflow: hidden ;}
A. a2 input {cursor: pointer; position: absolute; top:-10px; left:-10px; width: 200px; height: 200px; background: url (http://www.bkjia.com/uploadfile/2013/0329/20130329100312234.gif) transparent; border: 0 ;}
A. a2: hover {background-color: # 59595A ;}
</Style>
</Head>
<Body>
<Form action = "http://www.baidu.com/sss.html" method = "GET" target = "_ blank">
<A class = "a2" href = "javascript:;"> center display
<Input type = "submit" value = ""/>
</A>
</Form>
</Body>
</Html>
Hover black,
Implemented using a + input to facilitate css control,
Js.
Ie6-10/op/ff/ch are no problem.