<a class='boo' href='#'>click me</a>
.boo {
  display: inline-block;
  position: relative;
  margin: 1em;
  padding: .5em 2em;
  background: 
    linear-gradient(60deg, lightblue 50%, transparent 50%) 100% 0, 
    linear-gradient(-60deg, transparent 50%, lightblue 50%) 100% 100%,
    linear-gradient(-90deg, transparent 1em, lightblue 1em);
  background-repeat: no-repeat;
  background-size: 1em 50%, 1em 50%, 100% 100%;
  color: white;
  font: 1em Verdana, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.boo:before, .boo:after {
  position: absolute;
  right: -.2em;
  width: .5em; height: 50%;
  background: lightblue;
  content: '';
}
.boo:before {
  top: 0;
  transform: skewX(30deg);
}
.boo:after {
  bottom: 0;
  transform: skewX(-30deg);
}
.boo:hover {
  background-image: 
    linear-gradient(60deg, skyblue 50%, transparent 50%), 
    linear-gradient(-60deg, transparent 50%, skyblue 50%),
    linear-gradient(-90deg, transparent 1em, skyblue 1em);
}
.boo:hover:before, .boo:hover:after { background: skyblue; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.