如何更改提交按鈕，就可以

可能重複的形狀：
Draw Circle using css alone 如何更改提交按鈕，就可以

我想知道是否有任何方式更改從提交按鈕的形狀矩形爲圓形

我不想使用圓形成形圖像解決方案。我想從CSS樣式的按鈕的所有其他特徵。

來源

2012-07-26 vivek_jonam

@WesleyMurch但這個問題顯示瞭如何創建一個圓成形的div區..我的改變提交按鈕形狀.. – 2012-07-26 14:39:52

對不起，你沒有覺得它有用。如果它有幫助，造型提交按鈕就像設計一個div（嘗試它）。事實上，兩個問題的最高票數答案都是一樣的。我沒想到你的問題實際上會被封閉，有人必須標記它。 – 2012-07-26 15:16:08

您的問題已答覆，但我建議你Twitter Bootstrap。

這是一個HTML/CSS框架，它允許您輕鬆地製作great buttons（等等）。

這個按鈕是「crossbrowser」，這意味着它們與Internet Explorer兼容。

只有一個類別 - btn - 您可以設定<button>，<input type="button">或<a>。

此：

<button class="btn"></button>

給出：

btn-primary，btn-info，btn-success，btn-warning，btn-danger：

enter image description here

您還可以快速與可選類自定義按鈕和btn-inverse。

這個類轉換你的按鈕，像：

enter image description here

然後你可以選擇一個大小與類btn-large，btn-small和btn-mini。

最後，您可以在按鈕中添加一個圖標（the list is here）。

此：

<button class="btn btn-success"> 
    <i class="icon-shopping-cart icon-white"></i> 
    <span>Checkout</span> 
</button>

給出：

enter image description here

與你的新的按鈕樂趣。 :)

來源

2012-07-26 14:44:31

我正在研究相同的..但沒有任何按鈕形狀的選項..他們呢？ – 2012-07-26 14:47:35

它提供了一個默認的形狀（如上圖），但你可以自由修改它：**它只是CSS！**如果你需要它可以在'border-radius：10px'中修改'border-radius：5px'。 '：）' – 2012-07-26 14:50:18

這根本不回答問題。 – 2015-09-09 13:42:35

使用CSS邊框半徑。我會推薦使用Google搜索'CSS按鈕生成器'等，並找到任何數量的按鈕生成工具，你可以玩，以獲得正確的CSS。您只需確保元素的高度=寬度，然後相應地調整角半徑。

來源

2012-07-26 14:25:28

使用border-radius財產。

實施例：

.button { 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
    border: solid 1px #000; 
    border-radius: 50% 
}

上面的例子會給你一個規則的圓形。

如果你想只是一個小圓形，試試這個：

.button { 
    width: 100px; 
    height: 30px; 
    background-color: #000; 
    border: solid 1px #000; 
    border-radius: 5px 
}

現場演示：Regular circle
現場演示：Rounded shape
現場演示：Input button with text

來源

2012-07-26 14:25:58

但這個解決方案不保留「提交」按鈕的特徵..它只是創建一個圓形的div .. – 2012-07-26 14:32:08

@vivek_jonam看到這個：http://tinkerbin.com/8wU6CMgy – 2012-07-26 14:33:25

但這也是一個div區..我需要它提交按鈕屬性.. – 2012-07-26 14:37:55

您可以使用邊界半徑在你的CSS中，但它不會在IE中支持。

玩弄： -

border-radius: 10px 10px 10px 10px

來源

2012-07-26 14:26:47 zigojacko

使用這種樣式：

input[type='submit'] { 
    width:100px; 
    height:100px; 
    border-radius:50px; 
}

來源

2012-07-26 14:27:26 Adrian

我建議要麼使用jQuery UI的（你可以讓你自己的主題）

或

CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS3在IE中不起作用。

來源

2012-07-26 14:28:08 james31rock

如何更改提交按鈕，就可以

回答

相關問題