<button>
  <h1>Join Now</h1>
  <div></div>
</button>
body {
  background: #111;
  margin: 50px auto 0 auto;
  width: 200px;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  height: 150px;
  position: relative;
  width: 150px;
  &:hover .arrow,
  &:hover .arrow:before,
  &:hover .arrow:after {
    background: #13d7d2;
  }
  
  &:hover h1 {
    color: #fff;
  }
  
}

div {
  background: #08f1eb;
  height: 20px;
  position: relative;
  width: 150px;
  &:before,
  &:after {
    content: '';
    width: 40px;
    height: 50px;
    transform: skew(30deg);
    background: #08f1eb;
    position: absolute;
    top: -40px;
    right: 0;
  }

  &:after {
    transform: skew(-30deg);
    top: 10px;
  }
}

h1 {
  color: #08f1eb;
  font: normal 30px/61px verdana, sans-serif;
  margin-left: 0px;
  position: absolute;
  top: -7px;
  left: 0;
  text-transform: uppercase;
  width: 100px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.