Expandable, Non-rectangular CSS Button?

After much poking around online, I've found lots of advice and examples for using CSS to style submit buttons, but they all result in rectangular buttons. I want to make a non-rec

Solution 1:

Totally possible with border radius, but you will have to submit with JavaScript instead of the <button> element.

For instance:

.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;

border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

border-top-right-radius: 60px 22px;    
-moz-border-radius-topright: 60px 22px;   
border-bottom-right-radius: 60px 22px;   
-moz-border-radius-bottomright: 60px 22px;
}

Makes:

See it live:

http://jsfiddle.net/9zamA/

Solution 2:

You could use the CSS border triangle trick: http://css-tricks.com/snippets/css/css-triangle/

You could use svg.