making the size of all the buttons same when using @html.Actionlink

I have the following four buttons on my web page. One of the button is @Html.ActionLink, the shape of this button is thicker than other buttons. I tried to use the same class for @Html.ActionLink as for other buttons. below is the screen shot of the buttons:

enter image description here

below is the code and style sheet for the buttons:

  <div class="form-group buttons-flex" style="margin-top:20px">
            
            <a style="float: left; margin-bottom:20px" href="/PDF/Index" class="Button btn btn-primary">Back to Main Page</a>
    
            <input style="float: right; margin-bottom:20px" type="submit" name="submitButton" id="myBtn1" value="Submit" class="btn btn-primary" />
            @Html.ActionLink("Download", "DownloadFile","Statement", null, new { @class = "btn btn-primary" });
            <a style="float: left; margin-bottom:20px" href="/FileUpload/Index" class="btn btn-primary">Upload Signed files</a>
        </div>

stylesheet:

.buttons-flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

How can I make "Download" button same size as other buttons.

>Solution :

I think the only different thing between the buttons is that ActionLink doesn’t have the margin. Add this to the ActionLink:

@style="margin-bottom:20px;"

Or add it to a new class or btn-primary class

Leave a Reply