CSS arrow to the right of a rounded rectangle "next" button

Go To StackoverFlow.com

1

I want very simple markup (<a class="next">Next</a>) to show a button with rounded corners, but with an arrow pointing right (like the "back" navigation button at the top of some iPhone apps). This is what I have so far (jsfiddle link here):

a.next {
    padding: 6px 12px;
    border-width: 1px !important;
    border-color: #333 !important;
    background: #5BFF2D; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */ 
    border-radius: 6px 0 0 6px !important;
    border-style: solid none solid solid !important;
}
a.next:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 12px solid transparent;
    border-left: 16px solid green;
    border-bottom: 12px solid transparent;
    background: white;
}​

..which looks like this:

this is what Chrome has to say about my CSS

As you can see, it doesn't work at all. My thoughts at this point are: even if I do get the arrow correctly positioned, it'll never show the background gradient, much less the 1px border, correctly.

Is there a clean way of doing this?

2012-04-03 21:50
by cambraca
You won't ne able to put the fradiant on the background as long as it's a border. To do the 1px border, you would have to use another element on top of that element that did the gradient. You would be better off using an image sprite for this with the sliding box technique - Matthew Darnell 2012-04-03 21:58


1

Original Answer

This gets very close, but without a border. If you want to add a span inside, then the border becomes possible also, as well as some smoothing on the 'faked' gradient.

Updated Answer

This achieves the gradient and overall looks better. The main issue is that it requires you to have a solid background color behind it (white, in this case).

Final Answer

This actually does support the gradient leaving the angles transparent. It only will work in browsers supporting CSS3 transforms. I tested in IE9, FF 11, Chrome 18. IE9 is not showing your filter gradient. Chrome renders on my screen with a snubbed point to the arrow (perhaps with some browser targeting, variations like that could be adjusted for).

2012-04-03 23:33
by ScottS
very nice try! but it still looks too awkward for real-world use. - cambraca 2012-04-03 23:36
@cambraca--Yes, if you had no gradient (or just a two color ridge in the middle) it would look better - ScottS 2012-04-03 23:41
@cambraca--I updated with a possible gradient solution - ScottS 2012-04-04 00:01
this is impressive, my mind is blown all the way to Andromeda :O can I ask you to try and squeeze out of your brain just that little piece that's missing? (my background is not a solid color :( - cambraca 2012-04-04 00:39
@cambraca--I'll have to let that simmer in the back of my mind. The problem is, I'm using the solid color to cover the gradient button, and I really can't think of how I could get transparency at the corners AND the gradient - ScottS 2012-04-04 01:12
@cambraca--I did it (and this is my final answer... spent too long on it already). It works like you want on a modern browser. Some slight variations in rendering that are annoying - ScottS 2012-04-04 03:09
you're amazing, thanks so much for spending this much time on this. I'd give you 10 points if I coul - cambraca 2012-04-04 13:46
@cambraca--not that I'm fishing for points, but just so you are aware, you can reward people extra by starting a bounty (which cannot occur till 48 hours after your initial question post), and giving that bounty to the one you want to award extra for their effort. There is also a 24 hour wait time after the bounty posting before you can award. If you were to choose to use the bounty system that way, it is best to state in the bounty that you already intend to give it to a particular answerer (so people realize the bounty is not likely up for grabs) - ScottS 2012-04-04 14:38