Rotated button shadow paralel to the x-axis

Question

I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".

.btnMail{
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
    box-shadow: 0 8px 6px -6px black;
}

https://codepen.io/hubkubas/pen/dmJjWB

Answer 1

Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.

Here is a quick-fix that probably shows the type of shadow you want:

/* btn */

.btnMail{
  width: 65px;
  height: 60px;
  display: inline-block;
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
}


.btnMail:hover {
  transition: 0.30s;
  transform: rotate(0deg);
  box-shadow: 0px 8px 6px -6px black;
  background-color: rgba(255, 0, 54, 0.8);
}

.btnMail:active {
  box-shadow: 0 6px 6px -6px black;
  transition: 0.30s;
}

#shadow{
  z-index: -111;
  width: 65px;
  height: 50px;
  position: absolute;
  top: 17px;
  left: 5px;
  box-shadow: 0px 10px 16px -9px black;
}

<button class="btnMail shadow"><i class="fa fa-envelope"><a href="mailto:[email protected]"></a></i></button>
<div id="shadow">
</div>

(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).

You can learn more about how to create custom shadows on this link.