Как сделать кнопку в стиле комиксов

Question

Кнопка должна выглядеть так:

У меня получается что-то вроде такого. Но как добавить к тени skew я не знаю

html {
  text-align: center;
}

.heroes {
  background: #fff;
  border: 2px solid #000;
  transform: skewX(-25deg);
  padding: 10px 10px;
  text-transform: uppercase;
  font-weight: bold;
   box-shadow: -4px 3px 1px 1px rgb(0,0,0, 1);
}

<button class="heroes">Создана для ИТ-героев</button>

Answer 1

Может пойдёт кнопка из div с обработчиком

let dl = document.getElementById('downLayer');
let ul = document.getElementById('upperLayer');
dl.addEventListener('click', pushButton)
function pushButton(e){
 console.log("ИТ-герой!");
}

body{
background: #055590;
}
#downLayer {
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  width: 200px;
  height: 50px;
  background: #fff;
  transition: .1s;
  transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(-14deg) skewY(-2deg);
  cursor: pointer;
}
#downLayer:before {
  position: absolute;
  margin-top: -9px;
  margin-left: -2px;
  content: "";
  width: 190px;
  height: inherit;
  background: rgba(0,0,0, .45);
  transition: .1s;
  transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(-1deg) skewY(-4deg);
  z-index: -1; 
}
#upperLayer {  
   font: italic small-caps bold 16px/2 cursive;
   margin: 0 auto;
   width: 200px;
   height: 50px;
   background: #FFFFFF;
   text-align:center;
   line-height: 50px;
   color: black;
   border: 2px solid black;
   transition: .1s;
   font-size: 17px;
   font-weight: bold;
   text-shadow: 0px 0px 2px rgba(0,0,0,.7);
   box-shadow: 0px 0px 70px rgba(0,0,0,.4);
   user-select: none;
}

#downLayer:hover #upperLayer{
  box-shadow: 0px 0px 60px rgba(57,156,175, 1);
}
#downLayer:active:before {
  transform: rotate(0deg) translateX(10px) translateY(11px) skewX(-14deg) skewY(-2deg);
}
#downLayer:active {
  transform: rotate(0deg) translateX(10px) translateY(17px) skewX(-14deg) skewY(-2deg);
}

<div id="downLayer">
<div id="upperLayer">Создана для ИТ героев</div>
</div>

Answer 2

Кнопка, фон сделаны на SVG Анимация при наведении CSS3

Шрифт и угол поворота при наведении можно легко подобрать по своему вкусу

#gr1 {
 transform-origin: right center;
 transition:transform 0.5s;
 }
 #gr1:hover {
 transform:skewY(3deg);
  }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 434 138">

                                   <!-- Фон   -->
<path class="p1" d="M0 .6h161.8v138.9H0Z" id="path839" fill="#064787" stroke="#000" stroke-width="1" />
  <path d="M169.2.6H436v138.9H169.2Z" id="path841" fill="#1B5B77" stroke="#000" stroke-width="1" />
                                <!-- Тень -->
  <path d="m336.4 97.1-298.9 7.1 19.1-46.9 291.2-1.5Z" id="path837" fill="#000" stroke="#000" stroke-width="1" />      
 <g id="gr1">                    <!-- Кнопка -->
    <path id="btn" d="M54.1 37.2h299.3l-17 60H33z" id="path835" fill="white" stroke="#000" stroke-width="1" />
     <text x="50" y="74" font-size="30px" fill="black" > Создана для IT героев </text> 
 </g>
</svg>

Вариант с нажатием кнопки и изменением её цвета при нажатии

Для этого нужно только поменять местами трансформации
В исходном состоянии skewY(3deg);
При наведении - skewY(0deg);

#gr1 {
 transform-origin: right center;
 transform:skewY(3deg);
 transition:transform 0.5s;
 }
 #gr1:hover {
 transform:skewY(0deg);
 } 
  #gr1:hover #btn {
  fill:yellowgreen;
   transition:fill 0.5s;
 
  }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 434 138">

                                   <!-- Фон   -->
<path d="M0 .6h161.8v138.9H0Z" id="path839" fill="#064787" stroke="#000" stroke-width="1" />
  <path d="M169.2.6H436v138.9H169.2Z" id="path841" fill="#1B5B77" stroke="#000" stroke-width="1" />
                                <!-- Тень -->
  <path d="m336.4 97.1-298.9 7.1 19.1-46.9 291.2-1.5Z" id="path837" fill="#000" stroke="#000" stroke-width="1" />      
 <g id="gr1">                    <!-- Кнопка -->
    <path id="btn" d="M54.1 37.2h299.3l-17 60H33z" id="path835" fill="white" stroke="#000" stroke-width="1" />
     <text x="50" y="74" font-size="30px" fill="black" > Создана для IT героев </text> 
 </g>
</svg>

БЛОГ НА HUSL

Как сделать кнопку в стиле комиксов

Ответы (2 шт):

Вариант с нажатием кнопки и изменением её цвета при нажатии