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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -