Saltar al contenido

Cambiar el tamaño de un botón

este problema se puede resolver de variadas formas, pero te dejamos la que para nosotros es la resolución más completa.

Solución:

No debes usar “ancho” y “alto” attributes directamente, usa el estilo attribute me gusta style="some css here" si desea utilizar el estilo en línea:

This is a button

Tenga en cuenta, sin embargo, que Por lo general, se debe evitar el estilo en línea ya que hace que el mantenimiento y las actualizaciones de estilo sean una pesadilla. Personalmente, si tuviera un estilo de botón como el suyo pero también quisiera aplicar diferentes tamaños, trabajaría con varias clases CSS para dimensionar, así:

   .button 
        background-color: #000000;
        color: #FFFFFF;
        padding: 10px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin:10px
    
    
    .small-btn 
        width: 50px;
        height: 25px;
    
    
    .medium-btn 
        width: 70px;
        height: 30px;
    
    
    .big-btn 
        width: 90px;
        height: 40px;
    
    
This is a big button
This is a medium button
This is a small button

js Ejemplo de violín

El uso de esta forma de definir estilos elimina toda la información de estilo de su marcado HTML, lo que hará que sea más fácil en el futuro si desea cambiar el tamaño de todos los botones pequeños; solo tendrá que cambiarlos una vez en el CSS.

Si desea llamar a un tamaño diferente para el botón en línea, probablemente lo haría así:

This is a button

O, una mejor manera de tener diferentes tamaños (digamos que habrá 3 tamaños estándar para el botón) sería tener clases solo por tamaño.

Por ejemplo, llamarías a tu botón así:

This is a button

Y en tu CSS

.button.small  width: 60px; height: 100px; 

y simplemente cree clases para cada tamaño que desee tener. De esa manera, aún tiene las ventajas de usar una hoja de estilo en caso de que quiera cambiar el tamaño de todos los botones pequeños a la vez.

Usar estilos en línea:

This is a button

Violín

Si guardas algún titubeo o disposición de aumentar nuestro post te sugerimos escribir un paráfrasis y con gusto lo observaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *