<button class="snip1547"><span>Submit</span></button>
<button class="snip1547 hover"><span>Read More</span></button>
<button class="snip1547"><span>Add to Cart</span></button>
<button class="snip1547"><span>Subscribe</span></button>

@import url(https://fonts.googleapis.com/css?family=Poppins:500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.snip1547 {
  background-color: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 48px;
  margin: 15px 30px;
  outline: none;
  padding: 0 43px 0 0;
  position: relative;
  text-transform: uppercase;
}

.snip1547 span {
  background-color: #c72544;
  border-radius: 5px 0 0 5px;
  padding: 10px 20px;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.snip1547:after {
  font-family: FontAwesome;
  content: "\f0da";
  background-color: #c72544;
  position: absolute;
  right: 0%;
  height: 48px;
  padding: 1px 20px;
  top: 0;
  border-radius: 0 5px 5px 0;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.snip1547:hover span,
.snip1547.hover span {
  background-color: #ba2340;
}

.snip1547:hover:after,
.snip1547.hover:after {
  margin-top: -5px;
  background-color: #da3655;
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
}

/* Demo purposes only */
$(".hover").mouseleave(
  function() {
    $(this).removeClass("hover");
  }
);