CODEWITHSUNDEEP
htmlcss
Modelesq
Modelesq

Reputation: 5402

Improving on a right arrow button with CSS

This is what I have so far: http://jsfiddle.net/xzTGv/21/

I really need an improvement with my css button/anchor. I can't really get the right 'triangle'( which is really a square, rotated) to blend into the button properly.

Is there something else I should be doing? I've seen some people manipulate borders to make an actual triangle. But I've found that I can't really get the gradient with that method. I'd really appreciate all the help I can get with this.

Thank you in advance!

Upvotes: 0

Views: 977

Answers (2)

Marcel
Marcel

Reputation: 1514

i was just trying at the jsfiddle with the answer from Mike

.arrow:before{
    background: -moz-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
    background: -webkit-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
    background: -o-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
    background: -ms-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
    background: linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);

should work!

Upvotes: 1

Mike
Mike

Reputation: 1544

The problem I'm seeing is that the main button is a light to dark gradient from top to bottom, but the rotated "triangle" is a gradient from right to left. If you can rotate your gradient to go from top to bottom on the rotated one (so, rotate the gradient 90 deg) then you'd be set.

Upvotes: 1

Related Questions