Parallelogram with CSS Pseudo Elements

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <a href="#" class="button">
      Hellos
    </a>
  </body>

</html>

// Code goes here

/* Styles go here */
.button{
  position: relative;
  text-transform: uppercase;
  width:200px;
  color:white;
  font: bold 200% / 1 'Helvetica';
  background:transparent;
  text-decoration:none;
  padding:0.5em 1em;
}

.button::before{
  position:absolute;
  top:0px;right:0px;bottom:0px;left:0px;
  transform:skewX(-45deg);
  background:#58a;
  z-index:-1;
  content:'';
}