css如何将超链接a设计成按钮样式

标签: css超链接按钮button   时间:2017-11-03
我们在进行web前端开发时,有时候需要将超链接显示为类似button按钮的样式,这个时候就需要给a标签添加css样式。本文章向大家介绍css如何将超链接a设计成按钮样式,需要的朋友可以参考一下。

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

 

案例一:

<style>
.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;
}
</style>
<a href="http://www.manongjc.com" class="button">码农教程</a>

在线运行

 

案例二:

<style>
.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;
}
</style>
<a href="http://www.manongjc.com" class="link_button">码农教程</a>

在线运行

原文地址:http://www.manongjc.com/article/2208.html