Click on border don't activate event - html

Question

I have problem with using animation in css and event handler in JS.
I have to specific styles for my button (normal and with :active suffix). This solution let's me simulate 'clicking button'. In Html(this is angular directive) I have directive ng-click on that button but it only runs event when I click body of a button not border. But my css sets pointer on the border and there is animation an on clicking border too.
I am looking for the best practice/solution to repair that incident. Maybe I must leave css style with active suffix or add something to my styles.
CSS
#addButton {
padding: 5px;
float: left;
background: linear-gradient(#92AFDE, #668FED);
border: solid 2px #14438F;
margin-left: 10px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
#addButton:ACTIVE {
transform: translateY(4px);
}
HTML
<div class="card">
<img ng-click="selectCard()" style="width: 150px; height: 200px;" ng-src="cards/\{{cardId}}.png"></img>
<button ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
<div id="delButton">X</div>
</div>

Answer 1

Because when you specify border it comes after the actual width of the element.
Use
#addButton{
box-sizing:border-box
}
This css property will merge the border space in actual width.

Answer 2

Faced the same issue on a project I am developing. I used the above answer https://stackoverflow.com/a/38826326/7622397. But it didn't work. Clicking on border does not fire the click event. But it's important to add box-sizing: border-box (as mentioned in the answer) to make sure the below mentioned workaround works
The reason mentioned in the comment seems to be correct
OK i know where is the problem. If i click on the button the "activate" suffix moves the button down and browser don't notice click on this button because pointer is outside my div (after moving)
As a workaround, I created a div outside the button, gave a padding-top css (value is same or greater as the height of translateY) and give the onClick event to the div and not the button. I know, it's not a tidy fix, but it certainly works.
Code for reference
.sw-form-button-card {
padding: 5px 10px;
text-decoration: none;
background: #668ad8;
color: #FFF;
border: none;
box-sizing:border-box;
border-bottom: solid 3px #627295;
border-radius: 3px;
cursor: pointer;
}
.sw-form-button-card:active {
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
border-bottom: none;
}
HTML part:
<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
<button class="sw-form-button-card">
<span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
</button>
</div>