CSS Button with both Radius and Arrow, Possible?
I’m creating a site where I need both of these styles on the same button. I need a radius on the left hand side with the right hand side being an arrow. I’ve tried a few things. example the old fashioned background image with it aligned right for the arrow. Adding the web-kit radius to the button which didn’t work out to good.
In the past I’d create the button as a back ground image. But with CSS3 and a bit of magic I’m sure there’s a much better way to achieve this?
Anyone got a cleaner solution to the problem? I’ve had a google with a few coffee’s But nothing quite does what I’m trying to do.
-I’m using bootstrap 2.3 has a framework so this would need to work on as many browsers as possible and at multiscreen resolutions.
This is possible through usage of the
:after pseudo elements.
jsFiddle here - Basic example
HTML - pretty simple