How to put an image in an HTML button

I am creating a button on a certain page and would like to put a background image.

I'm trying to use the background-image:url() tag in CSS but it's not working.

HTML:

@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>
    <input type="button" class="but_clientes">
</div>

CSS:

/*botao abrir menu lateral*/

#Open_menu {
    position: fixed;
    cursor:pointer;
    margin-left: -150px;
    margin-top: 350px;
    font-size: 20px;
    transform: rotate(270deg)
}

.but_clientes {
    width: 300px;
    height: 100px;
    background-color: transparent;
    background-image:url('C:\clientes.png');
    border: groove
}

Fabric:

Project hierarchy:

Update, a folder was created in the project called Image but still, it did not work: