Нажмите на границу, чтобы не активировать событие

Question

У меня проблема с использованием анимации в css и обработчике событий в JS. У меня есть конкретные стили для моей кнопки (обычный и с: активным суффиксом). Это решение позволит мне симулировать нажатие кнопки. В Html (это угловая директива) у меня есть директива ng-click на этой кнопке, но она запускает событие только тогда, когда я нажимаю кнопку кнопки не на границе. Но мой css устанавливает указатель на границе, и на клике тоже есть анимация.

Я ищу наилучшую практику/решение для ремонта этого инцидента. Может быть, мне нужно оставить css-стиль с активным суффиксом или добавить что-то в мои стили.

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

Потому что, когда вы определяете границы он приходит после фактической ширины элемента.

Использование

#addButton{ 
    box-sizing:border-box 
} 

Это свойство CSS будет объединять границы пространства в фактической ширины.