使用按钮而不是href
这个问题在这里已经有了答案：
那里有很多CSS按钮生成器。 试试这个网站：http://www.bestcssbuttongenerator.com/
将html更改为：..
看到jsFiddle的例子
<a href="http://www.yahoo.com" target="_blank" class='myButton'>Go to Yahoo</a>
<a href="http://www.google.com" target="_blank" class='myButton'>Go to Google</a>
<a href="http://www.msn.com" target="_blank" class='myButton'>Go to MSN</a>
CSS：
.myButton {
-moz-box-shadow: 3px 4px 0px 0px #899599;
-webkit-box-shadow: 3px 4px 0px 0px #899599;
box-shadow: 3px 4px 0px 0px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba', GradientType=0);
background-color:#ededed;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:1px solid #d6bcd6;
display:inline-block;
cursor:pointer;
color:#3a8a9e;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed', GradientType=0);
background-color:#bab1ba;
}
.myButton:active {
position:relative;
top:1px;
}