.c-btn{
  border: none;
  background-color: orange;
  padding: 12px 48px 12px 24px;
  border-radius: 4px;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

<button class="c-btn">View Profile</button>

As stated in my comment, this is kind of expected because roughly speaking what happens is that a semi-transparent white layer is being placed on top of another such layer in the areas where there is an overlap and so, that area quickly appears whiter than the rest.

Using Skew Transform:

One solution would be like in the below snippet but it makes the hover/hit area a rectangle. What I've done here is to make the pseudo-elements create the entire shape (other than the left border) and a overflow-hidden on the parent prevents the unwanted skewed portions on left side from showing up.

body {
  background: gray;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border-left: solid 2px white;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s ease-out;
  overflow: hidden;
}
.more-skewed:before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  bottom: 50%;
  border-right: solid 2px white;
  border-top: solid 2px white;
  transform: skewX(25deg);
  transform-origin: right bottom;
  width: 100%;
  transition: all 1s ease-out;
  z-index: -1;
}
.more-skewed:after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 0px;
  top: 50%;
  border-right: solid 2px white;
  border-bottom: solid 2px white;
  transform: skewX(-25deg);
  transform-origin: right top;
  width: 100%;
  transition: all 1s ease-out;
  z-index: -1;
}
.more-skewed:hover {
  color: black;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  background: white;
}

<a class="more-skewed" href="#">MORE</a>

Using Rotate with Perspective:

Another solution could be to use rotate transforms with a bit of perspective added to it. By setting the appropriate value for transform-origin we can make it produce a trapezoid which can be placed at the appropriate positions to produce an arrow. Here, the hover/hit area remains within the shape but this approach is useful only if the text is small and static. If the text becomes longer, the slope on the right side of the shape becomes more gradual instead of being steep (of-course, we can change the transforms to make it look better, but it is not very useful if we have to keep changing it often).

.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 16px 40px;
  letter-spacing: 3px;
  margin: 10px;
}
.more-skewed:before,
.more-skewed:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: 0;
  border-right: 3px solid white;
  transition: all 1s ease-out;
}
.more-skewed:before {
  top: -2px;
  border-top: 2px solid white;
  transform-origin: left top;
  transform: perspective(100px) rotateX(30deg);
}
.more-skewed:after {
  bottom: -2px;
  border-bottom: 2px solid white;
  transform-origin: left bottom;
  transform: perspective(100px) rotateX(-30deg);
}
.more-skewed:hover {
  color: black;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  background: white;
}
.more-skewed span {
  position: relative;
  z-index: 1;
}
body {
  background: gray;
  font-family: sans-serif;
}

<a class="more-skewed" href="#">
  <span>MORE</span>
</a>
<br/>
<a class="more-skewed" href="#">
  <span>MORE LONGER TEXT</span>
</a>

(Feedback is that the above snippet breaks in IE. I will address that when I find time.)

Here is another version that I came up with as I was playing around. It is a bit like a background slide-fill effect which keeps the hover/hit area within the shape but due to the way gradients are rendered by browsers, it isn't very clean. Thought of leaving it here just in-case you find it useful.

body {
  background: gray;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s linear;
  background: linear-gradient(245deg, transparent 9px, white 10px), linear-gradient(295deg, transparent 9px, white 10px);
  background-size: 0% 50%;
  background-position: top right, bottom right;
  background-repeat: no-repeat;
}
.more-skewed:before {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -7px;
  top: -2px;
  bottom: 50%;
  transform: skewX(25deg);
  width: 15px;
  background: linear-gradient(white, white);
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: top right;
  transition: all 1s 1s linear;
}
.more-skewed:after {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -7px;
  bottom: -2px;
  top: 50%;
  transform: skewX(-25deg);
  width: 15px;
  background: linear-gradient(white, white);
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: top right;
  transition: all 1s 1s linear;
}
.more-skewed:hover {
  color: black;
  background-size: 100% 50%;
  transition: all 1s 1s linear;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  color: black;
  background-size: 100% 100%;
  transition: all 1s linear;
}

<a class="more-skewed" href="#">MORE</a>

Have you tried something using html/css??

#vert_menu{   overflow: hidden;  width: 100%; }
#vert_menu li{  float: left; }
#vert_menu a{
  padding: 8px 20px 8px 40px;
  float: left; text-align:center;
  text-decoration: none; font: normal 16px Myriad Pro, Helvetica, Arial, sans-serif;  text-shadow:0px 1px 0px #000;
  color: #e6e2cf;
  position: relative; text-shadow:1px 0 0 #000;
  background: #525252;  min-width:181px; width:auto
}

#vert_menu a::after,
#vert_menu a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -19px;   
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#vert_menu a::after{   z-index: 2;  border-left-color: #525252;   }

<ul id="vert_menu">
<li><a href="#" class="current">test</a></li>
</ul>

Arrow only css:

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<i class="arrow right"></i>
<br/>
<i class="arrow left"></i>

EDIT:

Yes, you can create a toggle arrow making triangles with the border trick and toggle with the checkbox trick.

.toggle-arrow {
      position: relative;
      cursor: pointer;
    }
    .toggle-arrow .real-checkbox {
      clip: rect(0, 0, 0, 0); /* Hide checkbox */
      position: absolute;
    }
    .toggle-arrow .real-checkbox + .toggle-button {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .toggle-arrow .real-checkbox + .toggle-button::before {
      content: "";
      display: inline-block;
      /* Arrow */
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      /* Right arrow */
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    .toggle-arrow .real-checkbox:checked + .toggle-button::before {
      /* Left arrow */
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }

<label class="toggle-arrow">
  <input type="checkbox" class="real-checkbox">
  <div class="toggle-button"></div>
</label>

Change the right CSS property with the left if you want to start with the arrow pointing differently.

Here I made it for you jsFiddle

Edited HTML:

<span class="arrowBtn">&nbsp;<span class="icon"></span></span>

You can create CSS3 arrow from borders:

.sBtn-go .arrowBtn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 13px;
  border-color: transparent transparent transparent white;
}