Search code examples
htmlcssbuttonsubmitsubmit-button

how to change the shape of submit button to circle


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.


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