Botón de Icono

Definición de criterios de construcción de iconos para seguir escalando el sistema.

Los botones de iconos permiten a los usuarios realizar acciones rápidas para desencadenar funciones que permitan los sistemas. Para esto es importante considerar:

  • Representativo: El botón de icono utiliza un ícono visualmente reconocible y representativo para transmitir la acción o función que se realizará al hacer clic en él. El ícono debe ser claro, conciso y fácilmente identificable por los usuarios.

  • Posición: Considerar ubicaciones universalmente reconocidas y de fácil acceso para los usuarios.

  • Tamaño: El ícono define el tamaño, considerado desde un inicio que sea visiblemente accesible. Desde ahí, se comienza a construir el botón ícono

  • Coherencia: Es importante mantener la coherencia visual en el diseño de los botones de icono en toda la interfaz. Los iconos deben tener un estilo y tamaño coherentes para que los usuarios puedan reconocerlos fácilmente y asociarlos con las acciones correspondientes.

  • Accesibilidad: Asegúrate de que el contraste entre el ícono y el fondo sea adecuado para una fácil legibilidad, y considera agregar atributos descriptivos si son necesario.

  • Feedback: Proporciona una retroalimentación visual para evidenciar que la acción del usuario fue reconocida, el botón de icono tiene cambios de estado al pasar sobre él y presionarlo.

Botón de Ícono

Esta versión de botón de icono es la estándar y simple, donde su contenedor cuadrado es blanco para la versión clara, cuando hay un fondo blanco, el contenedor desaparece por el mayor contraste logrado (fondo blanco, icono azul).

HTML

<button class="btn-icono">
<img class="icono-lineal" src="iconos/duda.svg" alt="" width="32" height="32">
</button>

CSS

button.btn-icono {
align-items: center;
background: #FFFFFF;
border-radius: 10px;
border: 3px solid transparent;
cursor: pointer;
display: flex;
gap: 10px;
height: 50px;
justify-content: center;
min-width: 52px;
mix-blend-mode: normal;
padding: 9px 10px;
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}



button.btn-icono:hover {
background-color: #EBF2F9;
 }

button.btn-icono:active{
background: #EBF2F9;
border: 3px solid #024588;
 }

JS

Botón icono con lista desplegabable

Para utilizar funcionalidades y acciones dentro de un botón con icono, se utiliza la flecha que evidencia que este icono tiene más información al presionarlo, es decir, no desencadena una acción, sino más bien despliega más funciones asociadas al ícono.

  • Agregar 1
  • Agregar 2
  • Agregar 3
  • Agregar 4
  • Agregar 5

HTML

<div class="dropdown">
<label id="btn-icono-1" onclick="botonIconoActivar()" class="btn-icono-select" for="btn-icono-toggle">
<img src="iconos/lenguaje_lineal.svg" alt="" width="32" height="32">
<img class="flecha-abajo" src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
<img class="flecha-arriba" src="iconos/arriba_lineal.svg" alt="" width="32" height="32">
</label>
<input type="checkbox" class="fab-checkbox" id="btn-icono-toggle">
<ul class="fab-menu">
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 1</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 2</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 3</li> <li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32"> Agregar 4</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 5</li>
</ul>
</input>
</div>

CSS

label.btn-icono-select{
align-items: center;
background: #FFFFFF;
border-radius: 10px;
border: 3px solid transparent;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 9px 10px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}



label.btn-icono-select:hover {
background-color: #EBF2F9;
 }

label.btn-icono-select:active{
background: #EBF2F9;
border: 3px solid #024588;
 }
.flecha-abajo {
display: block;
}
.flecha-arriba {
display: none;
}
.esconder {
display: none;
}
.mostrar {
display: block !important;
}
input.fab-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.fab-menu {
display: none;
position: absolute;
top: 58px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFFFFF;
width: 100%;
min-width: 200px;
max-width: 240px;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
}
.fab-menu li:first-child {
border-radius: 10px 10px 0 0;
}
.fab-menu li:last-child {
border-radius: 0 0 10px 10px;
}
.fab-menu li {
padding: 9px 20px;
text-decoration: none;
display: flex;
border-radius: 0 0 0 0 !important;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
cursor: pointer;
}

.fab-menu li:hover {
background-color: #EBF2F9;
}

.fab-menu li:first-child:hover {
background-color: #EBF2F9;
border-radius: 10px 10px 0 0 !important;
}

.fab-menu li:last-child:hover {
background-color: #EBF2F9;
border-radius: 0 0 10px 10px !important;
}

.fab-menu li:active {
background-color: #D7E5F4;
}

.fab-menu li:first-child:active {
background-color: #D7E5F4;
border-radius: 10px 10px 0 0 !important;
}

.fab-menu li:last-child:active {
background-color: #D7E5F4;
border-radius: 0 0 10px 10px !important;
}

.fab-checkbox:checked+.fab-menu {
display: block;
}

JS

function botonIconoActivar() {
const miBoton = document.getElementById("btn-icono-1");
miBoton.classList.toggle("btn-icono-activar");
const flechaAbajo = miBoton.querySelector(".flecha-abajo");
flechaAbajo.classList.toggle("esconder");
const flechaArriba = miBoton.querySelector(".flecha-arriba");
flechaArriba.classList.toggle("mostrar");
}

Botón icono con menú desplegable

El icono de tres puntos es en sí mismo una representación de un botón con icono desplegable, una variación del menú de hamburguesa.

HTML

<div class="dropdown">
<label id="btn-icono-1" onclick="botonIconoActivar()" class="btn-icono-select" for="btn-icono-toggle">
<img src="iconos/Ver_mas_vertical_lineal.svg" alt="" width="32" height="32">
</label>
<input type="checkbox" class="fab-checkbox" id="btn-icono-toggle">
<ul class="fab-menu">
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 1</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 2</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 3</li> <li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32"> Agregar 4</li>
<li><img src="iconos/agregar_persona_lineal.svg" alt="" width="32" height="32">
Agregar 5</li>
</ul>
</input>
</div>

CSS

label.btn-icono-select{
align-items: center;
background: #FFFFFF;
border-radius: 10px;
border: 3px solid transparent;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 9px 10px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}



label.btn-icono-select:hover {
background-color: #EBF2F9;
 }

label.btn-icono-select:active{
background: #EBF2F9;
border: 3px solid #024588;
 }
.flecha-abajo {
display: block;
}
.flecha-arriba {
display: none;
}
.esconder {
display: none;
}
.mostrar {
display: block !important;
}
input.fab-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.fab-menu {
display: none;
position: absolute;
top: 58px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFFFFF;
width: 100%;
min-width: 200px;
max-width: 240px;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
}
.fab-menu li:first-child {
border-radius: 10px 10px 0 0;
}
.fab-menu li:last-child {
border-radius: 0 0 10px 10px;
}
.fab-menu li {
padding: 9px 20px;
text-decoration: none;
display: flex;
border-radius: 0 0 0 0 !important;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
cursor: pointer;
}

.fab-menu li:hover {
background-color: #EBF2F9;
}

.fab-menu li:first-child:hover {
background-color: #EBF2F9;
border-radius: 10px 10px 0 0 !important;
}

.fab-menu li:last-child:hover {
background-color: #EBF2F9;
border-radius: 0 0 10px 10px !important;
}

.fab-menu li:active {
background-color: #D7E5F4;
}

.fab-menu li:first-child:active {
background-color: #D7E5F4;
border-radius: 10px 10px 0 0 !important;
}

.fab-menu li:last-child:active {
background-color: #D7E5F4;
border-radius: 0 0 10px 10px !important;
}

.fab-checkbox:checked+.fab-menu {
display: block;
}

JS

function botonIconoActivar() {
const miBoton = document.getElementById("btn-icono-1");
miBoton.classList.toggle("btn-icono-activar");
}

Botón de Icono

Código copiado al portapapeles