How to make a button fit into an upvote icon - html

Question

I was trying to make a button that has the shape of an icon but the button overflows the icon
.upvote, .downvote {
font-size: 55px;
}
.up {
color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="upvote up"><i class="fa fa-caret-up"></i></button>
<a class="upvote up"><i class="fa fa-caret-up"></i></a>
It works fine for a tag but I want to use it in a submit form so I can't use a tag.

Answer 1

Why don't use directly the icon as button like:
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-caret-up fa-5x upvote up"></i>
i add fa-5x for the size and cursor: pointer; for cursor in hover state.
Into a form:
const myform = document.getElementById('myform');
document.querySelector('.up').addEventListener('click', () => {
myform.submit();
});
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form id='myform'>
<i class="fa fa-caret-up fa-5x upvote up"></i>
</form>
Else you can use SVG sprites Link official, i can't post an example for Same origin policy

Answer 2

Instead of using an icon inside the button, you can follow this method. Here I have modified the button matching the styles of the icon. This way you can keep the properties of a button, while having a different design.
Otherwise, you can add a clickEventListener to the icon itself as Simone's answer
.arrow-up {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<button class='arrow-up'></button>
Please find the same for arrow-down
.arrow-down {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid green;
}
<button class='arrow-down'></button>
This way you can completely avoid the usage of fa icons if this is your only requirement.

Answer 3

Check the margin and padding of the icon as well as the button and also define height and width by yourself.
.upvote, .downvote {
margin: 0px;
padding:0px;
font-size: 55px;
}
.up {
margin: 0px;
padding:0px;
height:..;
color: green;
}