Botones CSS
Aprende a diseñar botones usando CSS.
Estilo de botón básico
Ejemplo
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Colores de los botones
Utilice la background-colorpropiedad para cambiar el color de fondo de un botón:
Ejemplo
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Tamaños de botones
Use la font-sizepropiedad para cambiar el tamaño de fuente de un botón:
Ejemplo
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Use la paddingpropiedad para cambiar el relleno de un botón:
Ejemplo
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Botones redondeados
Use la border-radiuspropiedad para agregar esquinas redondeadas a un botón:
Ejemplo
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Bordes de botones de colores
Use la borderpropiedad para agregar un borde de color a un botón:
Ejemplo
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Botones flotantes
Usa el :hoverselector para cambiar el estilo de un botón cuando pasas el mouse sobre él.
Sugerencia: use la transition-durationpropiedad para determinar la velocidad del efecto de "desplazamiento":
Ejemplo
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Botones de sombra
Use la box-shadowpropiedad para agregar sombras a un botón:
Ejemplo
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Botones deshabilitados
Use la opacitypropiedad para agregar transparencia a un botón (crea una apariencia "deshabilitada").
Sugerencia: también puede agregar la cursorpropiedad con un valor de "no permitido", que mostrará una "señal de prohibido estacionar" cuando pase el mouse sobre el botón:
Ejemplo
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Ancho del botón
De forma predeterminada, el tamaño del botón está determinado por su contenido de texto (tan ancho como su contenido). Use la widthpropiedad para cambiar el ancho de un botón:
Ejemplo
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Grupos de botones
Quite los márgenes y agréguelos float:lefta cada botón para crear un grupo de botones:
Ejemplo
.button {
float: left;
}
Grupo de botones bordeados
Use la borderpropiedad para crear un grupo de botones bordeados:
Ejemplo
.button {
float: left;
border: 1px
solid green;
}
Grupo de botones verticales
Use display:blocken lugar de float:leftpara agrupar los botones uno debajo del otro, en lugar de uno al lado del otro:
Ejemplo
.button {
display: block;
}
Botón en la imagen
Botones animados
Ejemplo
Agregue una flecha al pasar el mouse:
Ejemplo
Agregue un efecto "presionado" al hacer clic:
Ejemplo
Fundido de entrada al pasar el mouse:
Ejemplo
Agregue un efecto de "onda" al hacer clic: