Cambiar la forma de un botón en CSS puede ser tan simple o tan complejo como necesites. Aquí te dejo un ejemplo básico:
1. Rectangular (forma predeterminada)
```css
button {
/* No necesita especificaciones adicionales */
}
```
2. Redondo (círculo)
```css
button {
border-radius: 50%; /* Hace que las esquinas sean completamente redondeadas */
padding: 10px 20px; /* Asegúrate de que el botón siga siendo lo suficientemente grande para hacer clic */
width: 50px; /* Mantén el ancho y la altura iguales… */
height: 50px; /* …para que el botón sea un círculo en lugar de una elipse */
}
```
3. Elíptico
```css
button {
border-radius: 50%; /* Hace que las esquinas sean completamente redondeadas */
padding: 10px 20px; /* Asegúrate de que el botón siga siendo lo suficientemente grande para hacer clic */
width: 120px; /* Varía el ancho y la altura… */
height: 60px; /* …para que el botón sea una elipse */
}
```
4. Con esquinas redondeadas
```css
button {
border-radius: 10px; /* El tamaño de ‘border-radius’ determine cuán redondeadas son las esquinas*/
}
```
Por supuesto, esto es solo para la forma del botón. Puedes cambiar muchas otras propiedades del botón (como su color, si tiene algún borde, su tamaño, etc.) en función de tus requerimientos o preferencias.
