I'm facing an issue with using animation in CSS and event handlers in JS. Specifically, I have two styles for my button (normal and with the :active suffix) to simulate clicking the button. However, when I use the ng-click directive on the button in Angular HTML, the event only triggers when I click the body of the button, not the border where the pointer is set in the CSS.
I am seeking the best solution or practice to resolve this problem. Should I remove the CSS style with the active suffix or adjust something in 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>