A CodePen by Federico Holgado.

index.html

<nav id="btns">
  <a href="#" class="next">Next</a>
</nav>

style.css

#btns {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
text-align:center;
margin:-.75em auto 1.5em;
padding:1.5em 0;
}

#btns a {
display:inline-block;
position:relative;
width:110px;
height: 42px;
border:1px solid #aaa;
font-weight:700;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
color:rgba(0,0,0,0.6);
background:linear,top,#fff 0 100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}

#btns a.prev {
border-left:none;
}

#btns a.next {
border-right:none;
}

#btns a:before {
display:block;
position:absolute;
top:6px;
left:20px;
z-index:1;
width:30px;
height:30px;
border:1px solid #aaa;
border-top:none;
border-right:none;
content:"";
background:linear,-45deg,#fff 0 100%;
-webkit-border-radius:0 4px;
-moz-border-radius:0 4px;
border-radius:0 4px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

#btns a.next:before {
left:auto;
right:-.625em;
border:1px solid #aaa;
border-bottom:none;
border-left:none;
}

#btns a:hover:before {
background:linear,-45deg,#f874a4 0 100%;
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1);
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1);
box-shadow:0 2px 0 rgba(0,0,0,0.1);
border-color:#832448;
}

#btns a.next:hover:before {
-webkit-box-shadow:2px 0 0 rgba(0,0,0,0.1);
-moz-box-shadow:2px 0 0 rgba(0,0,0,0.1);
box-shadow:2px 0 0 rgba(0,0,0,0.1);
}

#btns a:active:before {
background:linear,-45deg,#ea4383 0 100%;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
border-color:#832448;
}

#btns a.next:active:before {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}