html - Click on border don't activate event -
i have problem using animation in css , event handler in js. have specific styles button (normal , :active suffix). solution let's me simulate 'clicking button'. in html(this angular directive) have directive ng-click on button runs event when click body of button not border. css sets pointer on border , there animation on clicking border too.
i looking best practice/solution repair incident. maybe must leave css style active suffix or add 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>
because when specify border comes after actual width of element.
use
#addbutton{ box-sizing:border-box }
this css property merge border space in actual width.
Comments
Post a Comment