送信ボタンの形を丸に変更する方法[複製]

質問

重複の可能性:
CSSだけで円を描く

送信ボタンの形状を長方形から円形に変更する方法があるかどうか知りたいです??

円形の画像ソリューションは使用したくありません。 CSS スタイルからのボタンの他のすべての特性が必要です。

解決

あなたの質問はすでに回答されていますが、お勧めしますツイッターブートストラップ.

を作成できる HTML/CSS フレームワークです。素晴らしいボタン（特に）簡単に。

このボタンは「クロスブラウザ」ボタンであり、Internet Explorer と互換性があることを意味します。

クラスが 1 つだけの場合 - btn - スタイルを設定できます <button>, <input type="button"> または <a>.

これ：

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

次のようになります。

enter image description here

オプションのクラスを使用してボタンをすばやくカスタマイズすることもできます。

btn-primary, btn-info, btn-success, btn-warning, btn-danger そして btn-inverse.

このクラスはボタンを次のように変換します。

enter image description here

次に、クラスでサイズを選択できます btn-large, btn-small そして btn-mini.

最後に、アイコン (リストはここにあります) をボタンに入力します。

これ：

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

次のようになります。

enter image description here

新しいボタンをお楽しみください。 :)

他のヒント

使用 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
}

CSS 境界線の半径を使用します。「CSS ボタンジェネレーター」などでグーグル検索して、CSS を正しく設定するために試してみることができるボタン生成ツールをいくらでも見つけておくことをお勧めします。要素の高さ=幅を確認し、それに応じて角の半径を調整するだけです。

このスタイルを使用します。

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

CSS で border-radius を使用できますが、IE ではサポートされません。

遊んでみましょう:-

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

Jquery UIを使用することをお勧めします（独自のテーマを作成できます）http://jqueryui.com/themeroller/

または

CSS3はIEでは動作しません。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow