Arrow button with vertical gradient background

Question

I need to make this button:

Usually when I need to make arrow button with gradient and border, I add .button:before element with absolute positioning, using transform: rotate(-45deg) translate(%SOMETHING%); and adding background: linear-gradient(45deg, %COLORS%);. But now I need to make button, arrow angle of which is not right. How can I do it?

Answer 1

You can design this button using :before selector:

.button {
   width: 120px;
   height: 50px;   
   position: relative;
   -moz-border-radius:    5px;
   -webkit-border-radius: 5px;
   border-radius:         5px;
   border:1px solid #4d7a9c; 
   position:relative;
   color:white;
   font-size:18px;
   
   background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */ 
 }

.button:before {
  content: "";
  position: absolute;
  transform: scaleX(0.6) rotate(45deg);
  height: 38px;
  width: 38px;
  right:-18px;
  top:5px;
  border-radius:  5px;
  z-index:-1px;
  
  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<button class="button">Text</button>

Answer 2

You can do it like this :

#trape {
  position: absolute;
  height: 50px;
  color: white;
  width: 80px;
  border:0;
  background-image: linear-gradient(0deg, red, tan);
}

#trape:before {
  content: "";
  position: absolute;
  transform: scaleX(0.6) rotate(45deg);
  height: 35px;
  width: 35px;
  right:-18px;
  top:7px;
  background-image: linear-gradient(-45deg, red, tan);
}

<button id="trape"></button>

Hope it helps :)