Cómo hacer botones redondos

¿Cómo puedo hacer botones redondos usando HTML y CSS? Traté de usar una imagen de fondo y convertirla en un cierto tamaño, pero eso no parece funcionar. Específicamente, me gustaría hacer un botón circular, que con un clic lanzaría un script de Javascript.Cómo hacer botones redondos

Fuente

2011-12-09 Andrew Alexander

dos maneras:

1.) crear imágenes con esquinas redondeadas y establecer los colores entre medio con CSS.

2.) Utilice las propiedades CSS que están limitadas a algunos navegadores (FF usa un conjunto, safari algunos otros, no está seguro si Chrome usa otro conjunto).

Comprobar this list

Fuente

2011-12-09 13:44:01 Alfabravo

Con border-radius.

http://jsfiddle.net/12w83vtn/

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

Fuente

2011-12-09 13:44:36

¿Qué navegadores? ¿Podrías ser específico? –

Probablemente sea mejor usar el radio del borde; 50%; en lugar de codificarlo en píxeles. De esta forma, puede cambiar las dimensiones sin pensar en el radio de la frontera. Ejemplo: http://jsfiddle.net/BfjAK/2/ – Munter

información sobre el soporte del navegador border-radius: http://www.quirksmode.org/css/contents.html#t45 –

Esto se puede hacer simplemente con CSS3:

HTML -

<div id="button"> 
</div>

CSS -

#button { 
    width:100px; 
    height: 100px; 
    border-radius:100%; 
    background-color:red; 
}

Y utilizar un evento onClicked hacer es un botón.

Fuente

2011-12-09 13:48:40

'border-radius: 50%;' debería hacer. También el marcado puede ser '', mientras que el css es 'botón { ancho: 100px; altura: 100 px; radio de borde: 50%; color de fondo: rojo; borde: 1px sólido # 000; } ' –

Respuesta

Cuestiones relacionadas