CSS Gradient arrow shape with inner shadow and gradient border

问题

I want to create a gradient arrow shape button with gradient border and 1px inner shadow from CSS.

I've created an image to show the button and the style rules:

This is what I have so far:

.button {
        color: #FFF;
        background-color: #D02180 !important;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f84aa4), to(#d02181));
        background: -webkit-linear-gradient(#f84aa4, #d02181);
        background: -moz-linear-gradient(#f84aa4, #d02181);
        background: -o-linear-gradient(#f84aa4, #d02181);
        background: linear-gradient(#f84aa4, #d02181);
        padding: 5px 10px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border: 1px solid #ab1465;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    }

<a class="button">Next</a>

Cross-browser support is a main thing so it's also ok if everything can be done from CSS expect the gradient border. In this case the border will have one simple color — #ab1465.

The main problem starts with the gradient. I can make an arrow shape with the help of css pseudo elements, but I need a cross browser solution to have one continuous gradient for the whole arrow shape.

回答1:

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:

This is the shape that creates it:

The shape is cut off with overflow: hidden on the parent.

The CSS

Create the angled shape and gradient with the :before.
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

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.

Complete Example

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>

来源：https://stackoverflow.com/questions/27151167/css-gradient-arrow-shape-with-inner-shadow-and-gradient-border

标签

css

button

gradient

css-shapes