Skewed button

How to?

  1. Add button widget to the content area and add specific class into it
  2. Copy CSS below to the custom code area

CSS:

				
					<style>
    /* skew button shape by 21 degree */
    .btn-skew {
        -webkit-transform: skew(-21deg);
        transform: skew(-21deg);
    }

    .btn-skew span > * i {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
    
    /* skew content inside button back to normal */
    .btn-skew span > * {
        display: inline-block;
        -webkit-transform: skew(21deg);
        transform: skew(21deg);
    }
</style>

Example:

Click here

Idea behind this

This is a pure CSS solution, we can use CSS transform to adjust the shape of any HTML object