CODEWITHSUNDEEP
cssbuttongradientcss-shapes
Bweb
Bweb

Reputation: 11

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:

Image

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.

Upvotes: 1

Views: 4696

Answers (1)

misterManSam
misterManSam

Reputation: 24692

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:

Screenshot

It looks nice zoomed in and doesn't break:

zoomed screenshot

This is the shape that creates it:

Shape Creation

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>

Upvotes: 5

Related Questions