<a class="button parallelogram" href="#">
  <span class="skew-fix">button</span
</a>
body {
  background:#ccc;
  font-family:sans-serif;
  padding:3em;
}

.button {
  background:yellow;
  box-shadow:10px 10px 0 rgba(0,0,0,.5);
  display:inline-block;
  font-size:2em;
  padding:.5em 2em;
  text-decoration:none;
}

.button:hover {

  box-shadow: 0 0 0 ;
}

.parallelogram{
  transform: skew(-20deg);
}

.skew-fix{
  display:inline-block;
  transform: skew(20deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.