cómo cambiar la forma del botón de enviar a círculo [duplicar]
-
12-12-2019 - |
Pregunta
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.
Solución
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. :)
Otros consejos
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
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.
Usa este estilo:
input[type='submit'] {
width:100px;
height:100px;
border-radius:50px;
}
Puede usar el radio de borde en su CSS, pero no será compatible con IE.
Juega con: -
border-radius: 10px 10px 10px 10px
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.