CSS Only Skew Button

Example of CSS Trick

by Rodrigo Portillo

HTML

<button>
<span>Hi, Fellow!</span>
</button>

CSS

body{
  background: #ddd;
}

button{
  transform: skew(.312rad);
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,.25);
  border: none;
  font-size:16px;
  padding: 10px 20px;
}

button span{
  display:block;
  transform: skew( -.312rad);
  color: #aaa;
  font-weight:bold;
 }