Search code examples
c#cssasp.net-mvc-3razorstylesheet

Style is not rendering in button when using in ASP.Net MVC3 Razor

In my project Button click action is not rendering as per the style provided So i tried two methods and both have screenshots attached.

1.<button type="submit" class = "btn btn-success">@Html.ActionLink("Save", "EmployeeRegistration",
"Home")</button> 
2.<button type="submit" >@Html.ActionLink("Save", "EmployeeRegistration", "Home",new{@class = "btn
     btn-success"})</button>

both have Style Issues ScreenShot for Method1

Screenshot for Method2

Solution

  • Just for a try, see what output the next line gives to you :-

    <input type="submit" class = "btn btn-success" value="Save" />

    Use only this :-

    @Html.ActionLink("Save", "EmployeeRegistration", "Home", new{ @class = "btn
 btn-success"});

    You were using Hyperlink within a button, that's why your button was dis aligned.

    Use this style :-

    .btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}