本文介绍了如何将“返回列表"链接更改为按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何更改.cshtml中的BACK链接:
How do you change the BACK link:
@Html.ActionLink("Back to List", "Index")
变成按钮?
推荐答案
@Html.ActionLink("Back to List", "Index", new { @class = "button-link" })
CSS
CSS
.button-link {
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-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);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.button-link:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
输出
http://jsfiddle.net/jKYX6/ [ ^ ]
有关更多信息:
http://www.usabilitypost.com/2012/01/10/pressed -button-state-with-css3/ [ ^ ]
希望对您有帮助.
Out put
http://jsfiddle.net/jKYX6/[^]
For more info :
http://www.usabilitypost.com/2012/01/10/pressed-button-state-with-css3/[^]
I hope this will help to you.
这篇关于如何将“返回列表"链接更改为按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!