Question 4j: 3D click button--transition on button movement doesn't work

[longfeiCA]

My code for this question:

<style>
  .stretch-button{
    background-color: green;
    color: white;
    padding-left: 10px;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 7px;
    font-size: 25;
    font-weight: bold;
    cursor: pointer;
    border-style: none;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    transition: box-shadow 1s, margin-top 1s, margin-left 1s;
  }

  .stretch-button:active{
    box-shadow: 0 0 0 rgba(0,0,0,0.2);
    margin-top: 5px;
    margin-left: 5px;
  }

</style>

<button class="stretch-button">
  Shadow
</button>

I set transition time to 1 second on purpose. It seems that only the shadow is working, but the button movement is instant. I wonder if there is a way to make the button move slowly as the shadow shrinks.