创建一个带有双箭头的按钮 [英] Create a button with double arrows at the end

问题描述

我想为按钮实现此效果：

我已经打了几个小时，最好的办法是这个 CodePen 。

 < a href =＃class =btn-wrap> 
< span class =btn btn-primary>查看证明< / 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）; 
} 
  

我想确保它能正常响应，所以如果文本突破2

解决方案

注意：我链接在评论是最好的，如果你必须支持所有的浏览器。如果IE支持不是强制性的，那么你可以使用剪辑路径，如在这个答案。

使用SVG <$ c $

c> clipPath 以及CSS clip-path 属性，我们可以创建一个路径，从而从按钮中删除不需要的部分（ a 标签）。

优点： $ b

• 输出是响应式的，因为它是基于SVG的，并且即使文本跨越多行也可以适应。


• 只需要一个元素三个元素（例如我在评论中提供的笔）。


• 剪切是透明的，因为我们剪切路径，因此即使当 body 或父级具有非实体背景时，这也将工作。

缺点：

• clip-path缺少支持 在任何版本的IE包括边缘。支持Edge中的 clip-path 正在考虑中，并且可能会在将来实现。

  body {background：grey;} a {display：block; background：rgb（255,126,0）;颜色：白色; 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 =0height =0> < defs> < clipPath id =clipperclipPathUnits =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>查看证明< / span>< / a>< a href =＃class =btn-wrap> < / a>  
 

I'm trying to achieve this effect for a button:

I've been battling it for a couple hours and the best I could come up with was 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 to ensure it works well responsively, so if the text breaks to 2 lines, the arrows maintain full height.

Any thoughts?

解决方案

Note: The approach that is used in the answer that I linked in comments is the best if you have to support all browsers. If IE support is not mandatory then you can use clip paths like in this answer. Could not post this approach in the other thread because its requirements are different and hence adding as answer here.

Using SVG clipPath along with the CSS clip-path property we can create a path such that it cuts out the unwanted portions from the button (the a tag).

Pros:

• Output is responsive as it is SVG based and can adapt even if the text spans more than a line.
• Only one element is required unlike three elements (like in the pen that I provided in comments).
• The cuts are transparent as we are clipping the path and so this will work even when the body or the parent has a non-solid background.

Cons:

• Lack of support for clip-path in any version of IE including Edge. Support for clip-path in Edge is Under consideration and may get implemented in future.

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>

这篇关于创建一个带有双箭头的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！