Botón de Acción Flotante FAB
Definición de criterios de construcción de iconos para seguir escalando el sistema.
Para resaltar una acción principal y promover la interacción del usuario de manera rápida y fácil dentro de un entorno digital, los botones FAB (Floating Action Button / Botón de Acción Flotante) se utilizan considerando los siguientes características:
- Acción: El botón FAB debe representar una acción principal o primaria en la interfaz. Por lo general, se utiliza para acciones frecuentes y de alto nivel, como crear un nuevo elemento, iniciar una conversación o llevar a cabo una función principal en la aplicación o entorno web. Esta acción principal nace de la necesidad del usuario, es decir, se diseña situando las personas al centro del proceso.
- Forma: Los botones FAB para Malta pueden ser circulares o se pueden utilizar en un contenedor con los extremos totalmente redondeados, con la finalidad de destacar y diferenciarse del resto de acciones y contenidos de la experiencia.
- Posición: Un botón FAB generalmente se coloca en una posición prominente y flotante en la interfaz, ubicada en la esquina inferior derecha. Esta posición destacada permite que el botón sea fácilmente accesible y visible para el usuario.
- Contraste: Dado que el botón FAB se utiliza para resaltar una acción principal, suele tener un contraste visual significativo con respecto al fondo y otros elementos de la interfaz para que sea fácilmente identificable y accesible.
- Contenido: El botón FAB suele contener un icono en su interior que representa visualmente la acción que realizará. El icono debe ser simple, fácilmente reconocible y visualmente coherente con el resto de la interfaz. También es posible complementar el ícono con una palabra que refuerce la compresión de la acción.
- Feedback:Los botones FAB cambian de color cuando se pasa el cursor sobre ellos. Al presionarlos, el icono debe cambiar a su estado lleno dejando en evidencia el feedback para el usuario. También las animaciones sutiles permiten evidenciar la interacción del usuario y proporcionar una retroalimentación visual de la acción. Por ejemplo, pueden expandirse o revelar opciones adicionales cuando se les da clic.
- Consistencia: El ícono utilizado debe poseer coherencia en el diseño de la interfaz y utilizar botones FAB de manera coherente en toda la aplicación.
Botón FAB de icono
Versión de botón FAB oscuro con ícono para la versión clara de la interfaz. Lo importante es el contraste entre fondo de la página y el color del contenedor a utilizar. En este caso utilizamos el azul principal.
HTML
<button class="fab-icono">
<img class="icono-lineal" src="iconos/chat-fab-lineal.svg" alt=""
width="32"
height="32">
<img class="icono-lleno" src="iconos/chat-fab-lleno.svg" alt=""
width="32"
height="32">
</button>
CSS
button.fab-icono {
align-items: center;
background: #024588;
border-radius: 30px;
border: 3px solid transparent;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
cursor: pointer;
display: flex;
height: 60px;
justify-content: center;
mix-blend-mode: normal;
padding: 9px;
width: 60px;
}
button.fab-icono .icono-lineal:hover {
display: block;
}
button.fab-icono .icono-lleno {
display: none;
}
button.fab-icono:hover {
background-color: #1669BC;
}
button.fab-icono:active{
background-color: #1669BC;
border: 3px solid #024588;
}
button.fab-icono:active .icono-lineal {
display: none;
}
button.fab-icono:active .icono-lleno {
display: block;
}
JS
Botón FAB de texto con icono
Para casos donde el ícono no queda evidencia su comprensión inmediata, se puede complementar la acción del ícono con una palabra descriptiva.
HTML
<button class="fab-texto-icono">
Etiqueta
<img class="icono-lineal" src="iconos/chat-fab-lineal.svg" alt=""
width="32"
height="32">
<img class="icono-lleno" src="iconos/chat-fab-lleno.svg" alt=""
width="32"
height="32">
</button>
CSS
button.fab-texto-icono {
align-items: center;
background: #024588;
border-radius: 30px;
border: 3px solid transparent;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
color: #FFFFFF;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 60px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 9px 28px;
text-align: center;
}
button.fab-texto-icono .icono-lineal:hover {
display: block;
}
button.fab-texto-icono .icono-lleno {
display: none;
}
button.fab-texto-icono:hover {
background-color: #1669BC;
}
button.fab-texto-icono:active{
background-color: #1669BC;
border: 3px solid #024588;
}
button.fab-texto-icono:active .icono-lineal {
display: none;
}
button.fab-texto-icono:active .icono-lleno {
display: block;
}
JS
Botón FAB de icono claro
Versión de botón FAB con ícono para la versión oscura de la interfaz o también para una situación con menor contraste necesario para el FAB.
HTML
<button class="fab-icono-secundario">
<img class="icono-lineal" src="iconos/bot-lineal.svg" alt=""
width="32"
height="32">
<img class="icono-lleno" src="iconos/bot-lineal.svg" alt=""
width="32"
height="32">
</button>
CSS
button.fab-icono-secundario {
align-items: center;
background: #FFFFFF;
border-radius: 30px;
border: 3px solid transparent;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
cursor: pointer;
display: flex;
height: 60px;
justify-content: center;
mix-blend-mode: normal;
padding: 9px;
width: 60px;
}
button.fab-icono-secundario .icono-lineal:hover
{
display: block;
}
button.fab-icono-secundario .icono-lleno {
display: none;
}
button.fab-icono-secundario:hover {
background-color: #EBF2F9;
}
button.fab-icono-secundario:active{
background: #EBF2F9;
border: 3px solid #024588;
}
button.fab-icono-secundario:active .icono-lineal
{
display: none;
}
button.fab-icono-secundario:active .icono-lleno
{
display: block;
}
JS
Botón FAB de icono con menú desplegable
Este menú desplegable permite contener acciones relevantes para el usuario de fácil acceso. Estas acciones desencadenaran funciones relevantes para el usuario que la página y/o la plataforma permita.
Agregar 1
Agregar 2
Agregar 3
Agregar 4- Agregar 5
HTML
<div class="dropdown">
<label id="fab-secundario-label-1" class="fab-icono-secundario-menu"
for="fab-toggle" onclick="activarBoton1()">
<img class="icono-lineal" width="32" height="32"
src="iconos/anadir_lineal.svg"/>
<img class="icono-lleno" src="anadir_lineal.svg" alt="" width="32"
height="32"/>
</label>
<input type="checkbox" class="fab-checkbox" id="fab-toggle">
<ul class="fab-menu" style="top:68px;">
<li>Ejemplo 1
</li>
<li>Ejemplo 2
</li>
<li>Ejemplo 3
</li>
</ul>
</input>
</div>
CSS
label.fab-icono-secundario-menu {
align-items: center;
background: #FFFFFF;
border-radius: 30px;
border: 3px solid transparent;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
cursor: pointer;
display: flex;
height: 60px;
justify-content: center;
mix-blend-mode: normal;
padding: 9px;
width: 60px;
}
label.fab-icono-secundario-menu .icono-lineal
{
display: block;
}
label.fab-icono-secundario-menu .icono-lleno {
display: none;
}
label.fab-icono-secundario-menu:hover {
background-color: #EBF2F9;
}
label.fab-icono-secundario-menu:active{
background: #EBF2F9;
border: 3px solid #024588;
}
label.fab-icono-secundario-menu:active .icono-lineal
{
display: none;
}
label.fab-icono-secundario-menu:active .icono-lleno
{
display: block;
}
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;
}
.fab-secundario-activo {
background: #EBF2F9;
border: 3px solid #024588;
}
JS
function activarBoton1() {
const miBoton = document.getElementById("fab-secundario-label-1");
miBoton.classList.toggle("fab-secundario-activo");
}
Botón FAB de icono con texto y menú desplegable
Ya sea hacia arriba o hacia abajo dependiendo de la ubicación del FAB en la pantalla, este menú desplegable permite contener acciones relevantes para el usuario de fácil acceso. Estas acciones desencadenaran funciones relevantes para el usuario que la plataforma otorga.
-
Agregar 1
- Agregar 2
- Agregar 3
- Agregar 4
- Agregar 5
HTML
<div class="dropdown">
<label id="fab-secundario-label-1" class="fab-icono-secundario-menu"
for="fab-toggle" onclick="activarBoton1()">
<img class="icono-lineal" width="32" height="32"
src="iconos/anadir_lineal.svg"/>
<img class="icono-lleno" src="anadir_lineal.svg" alt="" width="32"
height="32"/>
Nuevo
</label>
<input type="checkbox" class="fab-checkbox" id="fab-toggle">
<ul class="fab-menu" style="top:68px;">
<li>Ejemplo 1
</li>
<li>Ejemplo 2
</li>
<li>Ejemplo 3
</li>
</ul>
</input>
</div>
CSS
label.fab-secundario-menu {
align-items: center;
background: #FFFFFF;
border-radius: 30px;
border: 3px solid transparent;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
cursor: pointer;
display: flex;
height: 60px;
justify-content: center;
mix-blend-mode: normal;
padding: 9px;
width: 60px;
}
label.fab-secundario-menu .icono-lineal
{
display: block;
}
label.fab-secundario-menu .icono-lleno {
display: none;
}
label.fab-secundario-menu:hover {
background-color: #EBF2F9;
}
label.fab-secundario-menu:active{
background: #EBF2F9;
border: 3px solid #024588;
}
label.fab-secundario-menu:active .icono-lineal
{
display: none;
}
label.fab-secundario-menu:active .icono-lleno
{
display: block;
}
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;
}
.fab-secundario-activo {
background: #EBF2F9;
border: 3px solid #024588;
}
JS
function activarBoton1() {
const miBoton = document.getElementById("fab-secundario-label-1");
miBoton.classList.toggle("fab-secundario-activo");
}
