cómo cambiar la forma del botón de enviar a círculo [duplicar]

Question

Esta pregunta ya tiene respuestas aquí.:

Cerrado hace 7 años.

Posible duplicado:
Dibujar un círculo usando solo CSS

Me gustaría saber si hay alguna manera de cambiar la forma del botón de enviar de rectángulo a circular.

No quiero utilizar una solución de imagen con forma circular. Quiero todas las demás características del botón a partir del estilo CSS.

Answer 1

Tu pregunta ya está respondida pero te recomiendo Arranque de Twitter.

Es un marco HTML/CSS que le permite realizar grandes botones (entre otros) fácilmente.

Estos botones son "crossbrowser", lo que significa que son compatibles con Internet Explorer.

Con una sola clase - btn - puedes estilizar un <button>, <input type="button"> o <a>.

Este :

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

Da eso:

También puedes personalizar tu botón rápidamente con una clase opcional:

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

Estas clases transforman tu botón así:

Luego puedes elegir una talla con las clases. btn-large, btn-small y btn-mini.

Finalmente, puedes agregar un ícono (la lista está aquí) en su botón.

Este:

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

Da eso:

Diviértete con tus nuevos botones. :)

Answer 2

Use border-radius propiedad.

Ejemplo:

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

El ejemplo anterior le dará un círculo regular.

Si quieres un poco de forma redondeada, prueba esto:

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

en vivo Demo: círculo regular
Demo en vivo: forma redondeada
Demo en vivo: botón de entrada con texto

Answer 3

Usa el radio de la frontera de CSS.Recomendaría a Googling 'CSS Button Generator' o tal y encontrar cualquier número de herramientas de generación de botones con las que pueda jugar para obtener la derecha CSS.Solo necesitaría asegurarse de que la altura de la altura del elemento y luego ajuste el radio de la esquina en consecuencia.

Answer 4

Usa este estilo:

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

Answer 5

Puede usar el radio de borde en su CSS, pero no será compatible con IE.

Juega con: -

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

Answer 6

Sugeriría usar la interfaz de usuario jQuery (usted puede hacerlo propio tema) http://jqueryui.com/themeroller/

o

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

CSS3 no funcionará en IE.