Box Shadow - remove fade in/out

Question

The transition of the box-shadow makes fade in/out effect of the box shadow. It is visible when you set a slow transition.

Is possible to remove this fade effect, that shadow appears only by x and y position?

Example: https://codepen.io/crowscript/pen/yLvpKNa

Answer 1

If you want to remove the transition completely, you can delete this line:

transition:box-shadow 2s ease-out

Or if you want to keep the transition but have it fade-in in place, you need to set the shadow on the element then transition the colour:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease-out;
  box-shadow: 1rem 1rem 0 0 transparent;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}

<a href="#">
    Test link
</a>