Bootstrap input button not render with color - html

Question

I wish to add a font awesome icon beside my input button.
So, I found this answer and only option 1 apply to my use case since I need to submit a form to delete repository.
But the input button does not match the color of span tag.
I tried to add btn-danger class into input tag but it has shadow.
https://jsfiddle.net/coolwei/4osuyrk5/6/
What I want to achieve is a consistent color and button size with View and Add button.

Answer 1

First of all, you should use <button> tag.
However, if you really have to do this that way, you should clear default input styles like this:
.clear-input {
background: none;
color: inherit;
padding: 0;
border: 0;
}
And add this class to your input
<input class="clear-input" type="submit" value="Delete">
https://jsfiddle.net/2vdabphn/

Answer 2

I'm not sure why you're nesting a button inside an a here.
<a href="#">
<button type="button" class="btn btn-success mr-1">
<i class="fas fa-user-plus"></i>
Add Student
</button>
</a>
For your submit button, what you want to do is use the button tag with the type="submit" property.
<button type="submit" class="btn btn-danger">
<i class="far fa-trash-alt"></i>
Delete
</button>