Using a tag as submit button - html

Question

How can I use a tag as submit button in my form (Is just matter of design for me and not functionality)
My form
<form action="{{route('wishlist.store')}}" method="post">
{{csrf_field()}}
<input type="text" name="user_id" value="{{Auth::user()->id}}" hidden>
<input type="text" name="product_id" value="{{$product->id}}" hidden>
<button type="submit" class="wish-list">
<i class="fas fa-heart"></i>
</button>
</form>
All the issue I have is that gray box behind my font icon which is caused by <button> so I need to use <a> tag.
I also tried to change my button with a tag and added something like:
$(document).on("click","#sendwish",function(){
$('form').submit(function(evt){
evt.preventDefault();
var url = $('form').attr("action");
var formData = $('form').serialize();
$.post(url, formData, function(response){
console.log(response);
});
});
});
but it didn't work.
any idea?

Answer 1

Perhaps you can just overwrite default styles on the button?
.wish-list {
background: none;
border: none;
padding: 0;
margin: 0;
}
or if need be:
<button style="background: none; border: none; padding: 0; margin: 0;"></button>

Answer 2

Give your a form an ID as well as the link and call the onclick function to then submit the form.
Let's say you have a form called with an ID of SubmitMe and a span / div with the ID of ClickMe.
Example:
document.getElementById("#ClickMe").onclick = function(){
document.getElementById("#SubmitMe").submit();
}
Just so you know this, this will submit what ever is the action on the "SubmitMe" form.