how to change the shape of submit button to circle [duplicate]

StackOverflow https://stackoverflow.com//questions/11671429

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.

Was it helpful?

Solution

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

OTHER TIPS

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

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.

Use this style:

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

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top