Create a button with double arrows at the end

Question

I am trying to achieve this effect for a button:

I struggled with it for a couple of hours, and best of all I could come up with this CodePen .

<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the Proof</span>
</a>

.btn {
    border: 0;
    border-radius: 0;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
}
.btn-primary {
    position: relative;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.btn-primary:before, .btn-primary:after {
    position: absolute;
    content: '';
    right: -20px;
    width: 10px;
    height: 50%;
    background: inherit;
}
.btn-primary:before {
  top: 0;
  transform: skewX(30deg);
}
.btn-primary:after {
  bottom: 0;
  transform: skewX(-30deg);
}
.btn-wrap {
    position: relative;
    display: inline-block;
}
.btn-wrap:before, .btn-wrap:after {
    position: absolute;
    content: '';
    right: -40px;
    width: 10px;
    height: 50%;
    background: #337ab7;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.btn-wrap:hover:before, .btn-wrap:hover:after {
    background: #23527c;
}
.btn-wrap:before {
  top: 0;
  transform: skewX(30deg);
}
.btn-wrap:after {
  bottom: 0;
  transform: skewX(-30deg);
}

I want it to work well to respond, so if the text is split into 2 lines, the arrows support the full height.

Any thoughts?

Answer 1

. , , , . IE , , . , , , .

SVG clipPath CSS clip-path, , ( a).

:

• , SVG , .
• (, , ), .
• , , , body .

:

• clip-path IE, Edge. clip-path Edge .

body {
  background: gray;
}
a {
  display: block;
  background: rgb(255,126,0);
  color: white;
  width: 300px;
  min-height: 35px;
  padding: 4px 5% 4px 4px;
  margin-bottom: 10px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 24px;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0 0.79,0 0.83,0.5 0.79,1 0.81,1 0.85,0.5 0.81,0 0.86,0 0.9,0.5 0.86,1 0.88,1 0.92,0.5 0.88,0 0.93,0 0.97,0.5 0.93,1 0,1z" />
    </clipPath>
  </defs>
</svg>
<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the proof</span>
</a>

<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the proof when there is large text</span>
</a>

Hide result

Answer 2

pseudo-element , box-shadow

body {
  background: #3D3D3D;
}
.btn {
  width: 200px;
  height: 50px;
  padding: 10px;
  background: tomato;
  display:block;
  position:relative;
  margin:50px;
  line-height:50px;
  color:#fff;
  text-decoration:none;
  font-size:20px;
}
.btn:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 35px solid tomato;
  right:-35px;
  top:0px;
  }
.btn:before{
  position:absolute;
  content:"";
  width:15px;
  height:35px;
  background:tomato;
  transform:skew(45deg);
  right:-40px;
  top:0;
  box-shadow:25px 0 0 0 tomato;
  }
.btn_inner:after{
  position:absolute;
  content:"";
  width:15px;
  height:35px;
  transform:skew(-45deg);
  right:-40px;
  bottom:0;
  background:tomato;
  box-shadow:25px 0 0 0 tomato;
  }

<a href="#" class="btn">
  <span class="btn_inner">Some Text</span>
</a>

Hide result

Answer 3

:

#triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 9px solid red;
border-bottom: 20px solid transparent;
padding-right: 20px;
display: block;
}

.

, .

Devlen