可扩展，非矩形CSS按钮？ [英] Expandable, non-rectangular CSS button?

问题描述

在网上经历了很多事情之后，我发现了很多关于使用CSS来提交按钮的建议和例子，但是它们都导致了矩形按钮。我想制作一个非矩形按钮，自动调整大小以适应按钮图例。具体来说，我想让按钮看起来像这样（加上或减去圆角）：

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-rectangular button that automatically sizes itself to fit the button legend. Specifically, I want the button to look like this (plus or minus the rounded corners):

有任何建议吗？

推荐答案

完全可能使用边框半径，但您必须使用JavaScript而不是< button> 元素提交。

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

例如：

.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;
}

制作：

http://jsfiddle.net/9zamA/

这篇关于可扩展，非矩形CSS按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！