adding image in url action link inside input button?

Question

I want to add image button inside an input button which has url.action method

 <input type="button" class="btn btn-primary" value="View Chart" onclick="location.href='@Url.Action("Multigraph", "Home")'"/>

Actually i want to do this

On click of the image i will be able to go to the specific view

I have also looked into this link

Any help will be appreciated

Use styles and background-image :) – Laurent Lequenne Sep 06 '16 at 13:14 — Laurent Lequenne, Sep 06 '16 at 13:14
You have to take extra div or span tag – Sandip - Frontend Developer Sep 06 '16 at 13:27 — Sandip - Frontend Developer, Sep 06 '16 at 13:27

JeroenVdb · Accepted Answer · 2016-09-06T13:27:46.680

0

You could style the input button with css.

.btn--graph {
    width: 110px;
    height: 93px;
    background-image: url('https://i.stack.imgur.com/jCvdY.jpg');
}

<input type="button" class="btn btn-primary btn--graph" onclick="location.href='@Url.Action("Multigraph", "Home")'"/>

However if this button is actually a link to another webpage. It would semantically be more correct to use an anchor link.

<a href="@Url.Action("Multigraph", "Home")">
  <img src="https://i.stack.imgur.com/jCvdY.jpg" alt="View Chart">
</a>

edited Sep 06 '16 at 13:27

answered Sep 06 '16 at 13:21

JeroenVdb

1 Answers1