html中a做成按钮,css如何将超链接a设计成按钮样式

如何将超链接a设计成按钮样式？我们只需要为超链接a添加css样式即可。下面分享几个超链接a设计成按钮的案例。

案例一：

.button {

font: bold 11px Arial;

text-decoration: none;

background-color: #EEEEEE;

color: #333333;

padding: 2px 6px 2px 6px;

border-top: 1px solid #CCCCCC;

border-right: 1px solid #333333;

border-bottom: 1px solid #333333;

border-left: 1px solid #CCCCCC;

}

码农教程

案例二：

.link_button {

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

border: solid 1px #20538D;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

background: #4479BA;

color: #FFF;

padding: 8px 12px;

text-decoration: none;

}

码农教程