Klicken Sie auf Grenze nicht aktivieren Ereignis

Question

Ich habe ein Problem mit der Verwendung von Animation in CSS und Event-Handler in JS. Ich muss bestimmte Stile für meine Schaltfläche (normal und mit: aktivem Suffix). Diese Lösung lässt mich den "Klick-Button" simulieren. In Html (dies ist eine eckige Direktive) habe ich eine Direktive, die auf diese Schaltfläche klickt, aber nur ein Ereignis ausführt, wenn ich auf die Schaltfläche einer Schaltfläche klicke. Aber mein CSS setzt den Zeiger auf den Rand und es gibt auch eine Animation und einen Klick auf den Rahmen.

Ich suche nach der besten Praxis/Lösung, um diesen Vorfall zu reparieren. Vielleicht muss ich css style mit aktivem Suffix verlassen oder etwas zu meinen Styles hinzufügen.

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

Denn wenn Sie es nach der tatsächlichen Breite des Elements kommt angeben angrenzen.

Verwenden

#addButton{ 
    box-sizing:border-box 
} 

Diese CSS-Eigenschaft wird die Grenze Raum in der tatsächlichen Breite verschmelzen.