Home/ Questions/Q 7777919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:15:53+00:00

I want very simple markup ( <a class=next>Next</a> ) to show a button with

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0