<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.