Prevent material button animation on click

Issue

I have made a page with a button in a button like the following :

<button mat-button class="library-tile-button">

    <button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
    </button>

    <img class="library-picture" src="..."></img>

</button>

The buttons use angular material design.

When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.

When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.

Any lead how I can acheive that ? Thanks in advance.

Solution

As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.

Like this:

div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
  position:absolute;
  top:40px;
  left:40px;
}
.edit-library-button img {width:30px;}

<div>
  <button mat-button class="library-tile-button"> 

      <img class="library-picture" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEgEebJ5nRUJMbZt8kpEyQV1MXv5Y919z2cjHgizP-iw5fUavgsutNmvw2dv76KZCtkyRetTt00IZvR1jzLkCJOMz2w3He-mm-U1rs3wIU_cH9xS5cniACFnR_TNwMxGYld-tkk-gSQKzKg9SmNTRUHdf0tiVaNp3pqNH1_1RAH19KxL85WzRTvgWQJ0lw=" />

  </button>
  <button mat-button class="edit-library-button">
          <img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
   </button>
 </div>

Answered By - Alvaro Menéndez