how to change the shape of submit button to circle

Question

Possible Duplicate:
Draw Circle using css alone

I would like to know if there is any way to change the shape of the submit button from rectangle to circular shape??

I dont want to use an circular shapped image solution. I want the all other characteristics of the button as from the css style.

@WesleyMurch but that question shows how to create a circle shapped div area.. mine to change submit buttons shape.. — vivek_jonam, Jul 26 '12 at 14:39
I'm sorry you didn't find it useful. If it helps, styling a submit button is very much like styling a div (try it). In fact the highest voted answers on both questions are the same. I didn't expect your question would actually be closed, someone must have flagged it. — Wesley Murch, Jul 26 '12 at 15:16

Nikola K. · Answer 1 · 2012-07-26T14:39:53.407

14

Use border-radius property.

Example:

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

The above example will give you a regular circle.

If you want just a little rounded shape, try this:

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

Live demo: Regular circle
Live demo: Rounded shape
Live demo: Input button with text

edited Jul 26 '12 at 14:39

answered Jul 26 '12 at 14:25

Nikola K.

7,093
13
31
39

But this solution doesnt retain the characteristics of "submit" button.. It just creates a div in circular shape.. – vivek_jonam Jul 26 '12 at 14:32
@vivek_jonam See this: http://tinkerbin.com/8wU6CMgy – Nikola K. Jul 26 '12 at 14:33
but that is also a div area.. i need it to have submit button properties.. – vivek_jonam Jul 26 '12 at 14:37
@vivek_jonam Just replace `div` with `input`. Example: http://tinkerbin.com/S8BAZK3Q – Nikola K. Jul 26 '12 at 14:39
Links to live demo are dead. – Pang Dec 13 '16 at 10:20

score 5 · Accepted Answer · edited Apr 12 '14 at 15:16

5

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. :)

edited Apr 12 '14 at 15:16

Ben

2,200
20
30

answered Jul 26 '12 at 14:44

GG.

21,083
14
84
130

I was working on the same.. but that doesnt has any options for button shape.. do they? – vivek_jonam Jul 26 '12 at 14:47
It offers a default shape (like in the pictures above) but you are free to modify it: **it's just CSS!** Modify `border-radius: 5px` in `border-radius: 10px` if you need it. `:)` – GG. Jul 26 '12 at 14:50
This doesn't answer the question at all. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Sep 09 '15 at 13:42

score 2 · Answer 3 · answered Jul 26 '12 at 14:25

Use CSS border radius. I would recommend googling 'CSS button generator' or such and finding any number of button generating tools that you can play around with to get the css right. You would just need to make sure the element's height=width and then adjust the corner radii accordingly.

score 1 · Answer 4 · edited Nov 14 '12 at 19:21

1

Use this style:

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

edited Nov 14 '12 at 19:21

NGLN

43,011
8
105
200

answered Jul 26 '12 at 14:27

Mesh

6,262
5
34
53

score 0 · Answer 5 · answered Jul 26 '12 at 14:26

0

You can use border-radius in your CSS but it won't be supported in IE.

Play around with:-

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

answered Jul 26 '12 at 14:26

zigojacko

1,983
9
45
77

score 0 · Answer 6 · answered Jul 26 '12 at 14:28

0

I would suggest to either use the Jquery UI (you can make you own theme) http://jqueryui.com/themeroller/

or

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

CSS3 will not work in IE.

answered Jul 26 '12 at 14:28

james31rock

2,615
2
20
25

how to change the shape of submit button to circle

6 Answers6