渐变箭头按钮

让我们发挥创意吧！

此按钮完全由CSS创建-倾斜，边框和带有伪元素的渐变。看起来像这样：

Gradient Arrow Button

Let's get creative!

This button has been created entirely with CSS — skew, border and gradient with pseudo elements. It looks like this:

放大看起来不错，而且不会损坏：

It looks nice zoomed in and doesn't break:

这是创建它的形状：

形状会被溢出所切除：隐藏

• 使用创建倾斜的形状和渐变：before 。

内部阴影是通过：after $创建的c $ c>使用简单边框

The inner shadow is created with the :after using a simple border

为渐变指定了一个角度，以匹配伪元素旋转的方向

The gradient is given an angle to match the direction of the pseudo elements rotation

请注意使用转换：translateZ（0）。这样可以防止旋转的伪元素出现锯齿状。目前，伪元素位于 z-index：-1 的文本下方。

Note the use of transform: translateZ(0). This prevents a jagged appearance of the rotated pseudo element. Currently the pseudo element is placed underneath the text with z-index: -1.

您将需要细化细节，但这应该说明一切。为了获取更多文本，具有渐变的伪元素将需要更大。

You will need to tinker with the fine details, but it should speak for itself. In order to take more text, the pseudo element with the gradient would need to be larger.

@import url(http://fonts.googleapis.com/css?family=Exo+2:300);
 a {
  color: #000;
  text-decoration: none;
  position: relative;
  color: #FFF;
  display: inline-block;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  overflow: hidden;
  transform: translateZ(0);
  font-family: 'Exo 2', sans-serif;
}
img {
  position: relative;
  z-index: -1;
}
a:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -2.4em;
  left: -20%;
  width: 100%;
  height: 200%;
  background: #D02180 linear-gradient(130deg, rgba(248, 74, 165, 1) 30%, rgba(248, 74, 165, 1) 80%);
  transform: rotate(55deg) skewX(20deg) translateZ(0);
  z-index: -1;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 70%;
  height: 100%;
  transform: translateZ(0);
  z-index: -1;
  border-top: solid 1px #FFF;
  border-radius: 5px 0;
  opacity: 0.4;
}

<a href="#">Next</a>