Make a regular button look like slack - html

Question

I have a button which when pressed revokes a user's access token. I want to make it look like the Sign in with Slack button.
I am attaching the html code for the Sign in with Slack Button below.
<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
<img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack#2x.png 2x"
/>
What do I need to do to make my button look the same?
For now, the code for my button is as under:
<input type="button" value="Unlink Slack" onclick="location.href='#Url.Action(" RevokeAuth ","Settings ")'"/>

Answer 1

Is this what you were looking for I added the input to a div with the slack image and added the onclick to the div as well as the button so the pointer looks correct.
<style>
.slk {
border: 1px solid #C8C8C8;
width: 170px;
width: 170px;
border-radius: 5px;
display: flex;
height: 35px;
cursor: pointer;
}
.slkInp {
color: #383838;
background-color: white;
border: none;
padding: none;
font-size: 15px;
font-weight: bold;
}
.slkInp:hover {
cursor: pointer;
}
</style>
<div class="slk" onclick="location.href='#Url.Action(" RevokeAuth ","Settings ")'">
<img alt="Unlink Slack" height="30" width="30" style="padding-left:10px;" src="https://pbs.twimg.com/profile_images/885554951857946624/sd7GRyjY_400x400.jpg" /><input class="slkInp" type="button" value="Unlink Slack" onclick="location.href='#Url.Action("
RevokeAuth ","Settings ")'"/></div>
<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
<img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack#2x.png 2x"
/>

Answer 2

First off, I can't ask for clarification in a comment because of the 50 reputation requirement. Fair enough.
What it seems like you're asking is how do you want to style a button to look like the Slack button, but with only HTML? All they are doing here is using an <img> tag to throw a button on the screen. If you want to copy this behavior exactly, grab an image editor and draw a rounded rectangle with 1px black border, throw your icon on the right and some text on the left then follow the slack design:
<a href="https://linkhere.link">
<img alt="Sign in with X" height="40" width="172" src="image.png" />
</a>
If you want to be able to have a button styled similarly with just HTML and CSS you can do that too, with your input:
input {
height: 40px;
width: 172px;
border: 1px solid gray;
border-radius: 5px;
background-color: white;
content: url(image.png);
...
}
Then add your own image and move the text and image to your liking.