html - 送信ボタンの形を円に変更する方法

Question

重複の可能性：
cssのみを使用して円を描く

送信ボタンの形を長方形から円形に変更する方法はありますか？

円形のシャッピングされた画像ソリューションを使用したくありません。私はcssスタイルからのようにボタンの他のすべての特徴が欲しいです。

score 14 · Accepted Answer

プロパティを使用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
}

score 5 · Accepted Answer

Your question is already answered but I recommend you Twitter Bootstrap.

It is a HTML/CSS framework which allows you make great buttons (among others) easily.

This buttons are "crossbrowser" which means they are compatible with Internet Explorer.

With only one class - btn - you can stylize a <button>, <input type="button"> or <a>.

This :

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

Gives that:

enter image description here

You also can customize your button quickly with an optional class :

btn-primary, btn-info, btn-success, btn-warning, btn-danger and btn-inverse.

This classes transform your button like that :

enter image description here

Then you can choose a size with the classes btn-large, btn-small and btn-mini.

Finally, you can add an icon (the list is here) in your button.

This:

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

Gives that:

enter image description here

Have fun with your new buttons. :)

score 2 · Accepted Answer

CSSの境界線の半径を使用します。「CSSボタンジェネレーター」などをグーグルで検索し、CSSを正しく取得するために試してみることができるボタン生成ツールをいくつでも見つけることをお勧めします。要素のheight=widthを確認してから、それに応じてコーナー半径を調整する必要があります。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

遊んでください：-

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

score 0 · Accepted Answer

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

また

CSS3はIEでは機能しません。

6 に答える 6