How to make a button with Razor and Css

2

I'm trying to make a button on a particular page.

However, my entire project started with the Razor engine, so I would like to know how I can make a button with such an engine, I'm trying to do it like this:

@model WebApplication3.Models.Comercial.ComercialModels

@{
    ViewBag.Title = "Index";
}
<div id="Open_menu">
    <span onclick="openNav()">Menu</span>
</div>

<h2>Comercial</h2>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">@Html.ActionLink("Home", "Index", "MenuInicial")</a>
    <a href="#">@Html.ActionLink("Serviços", "Index", "Servicos")</a>
    <a href="#">@Html.ActionLink("Comercial", "Index", "Comercial")</a>
    <a href="#">@Html.ActionLink("Estoque", "Index", "Estoque")</a>
    <a href="#">@Html.ActionLink("Equipamentos", "Index", "Equipamentos")</a>
    <a href="#">@Html.ActionLink("Compras", "Index", "Compras")</a>
    <a href="#">@Html.ActionLink("Fiscal", "Index", "Fiscal")</a>
    <a href="#">@Html.ActionLink("Caixa", "Index", "Caixa")</a>
</div>

<div class="but_clientes">
    @Html.ActionLink("Clientes", "Clientes", "Comercial")
</div>

However, the result is not as expected, it creates as if it were a Hyper Link in the word, not a button:

CSS:

.but_clientes{width:100px;height:100px;background-color:transparent;background-image:url(../Image/clientes.png);background-repeat:no-repeat;background-position:center;border:2pxsolidblack;border-radius:10px;}

Whentryingtochangethehtmlcodeto:

<div>@Html.ActionLink("Clientes", "Clientes", "Comercial")
    {
       <input type="button" class="but_clientes" />
    }
</div>

We had the result:

    
asked by anonymous 23.10.2016 / 19:10

2 answers

3

Do not use <input> , nor @Html.ActionLink . Use:

<div>
    <a href="@Url.Action("Clientes", "Comercial")">
        <div class="but_clientes">Clientes</div>
    </a>
</div>
    
24.10.2016 / 03:37
1

You can put:

@Html.ActionLink("Clientes", "Clientes", "Comercial")
{
    <input type="button" class="but_clientes"/>
}
    
23.10.2016 / 20:01