超链接按钮样式

.myLinkA {
text-decoration: none;
font-size: 12px;
background-color: #4CAF50;
border: none;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
color: white;
}

.myLinkA:hover {
background-color: #3e8e41;
}
<a class="myLinkA" href="${ctx}/zjdlbb/zjdlbbXZB/zjdlbbxzb/saveXzz.ht"><span></span>保存</a>

 

另一款:

.myLinkB:hover {
background-color: #3e8e41;
color: white;
}
.myLinkB {
/* background-color: #4CAF50; *//* Green */
background-color:#F2F3F5;
/* border: 1px solid green; */
border: 1px solid #F2F3F5;
color:gray;
padding: 3px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
}

 

 

第三款

a.btnTwo {
    padding: 3px 7px;
    background: #b0e2ff;
    text-decoration: none;
    border-radius: 4px;
    margin: 2px;
      color: black;
}
a.btnTwo:hover {
    padding: 3px 7px;
    background: #3388e2;
    text-decoration: none;
    border-radius: 4px;
    margin: 2px;
      color: white;
}

<a class="btnTwo tjh2" onClick="xxx()" href="javascript:void(0);"   >电压等级管理</a>

第三款效果图,移上去变深背景色和白色字体

 

posted @ 2018-09-10 16:12  爱跳舞的程序员  阅读(199)  评论(0编辑  收藏  举报