Crear botones de acceso rápido

01/06/2025

Disponer de botones de acceso rápido en Etendo te permitirá agilizar su uso. Sigue los pasos que se indican a continuación y disfruta del resultado

Añadir un widget HTML

Las botoneras se añaden a un Widget HTML, así que lo primero es añadir a tu espacio de trabajo un «Widget HTML definido por el usuario»:

A continuación, copia y pega el siguiente código HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mi-boton {
        background: linear-gradient(45deg, #FF7F00, #B22222);
        color: white;
        border: none;
        padding: 8px 15px;
        text-align: center;
        display: inline-block;
        margin: 5px 2px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .mi-boton:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      }
      h3 {
        color: #B22222;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
<body>
<h3>&nbsp;Maestros</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('220', null, 'DEFAULT');">Terceros</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('180', null, 'DEFAULT');">Productos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('191', null, 'DEFAULT');">Tarifas</button>
<h3>&nbsp;Ventas</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F87F1EB7EB404F1F916EBAFAD1A0A334', null, 'DEFAULT');">Presupuesto de Ventas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('186', null, 'DEFAULT');">Pedidos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('D9471EE279D641B8BCCCC610D8FC40B1', null, 'DEFAULT');">Preparación</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('257', null, 'DEFAULT');">Albaranes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('263', null, 'DEFAULT');">Facturas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F039BA97E647457B9607A003BF3DA049', null, 'DEFAULT');">Ventas pendientes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('2EEB7E59D77F46F2AE308F34C06051E1', null, 'DEFAULT');">Cubo comercial</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('8865572DD3344760BFD8002397076591', null, 'DEFAULT');">Cola de Mails</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('CD573DF1E351485EA2B2DE487DCACA6F', null, 'DEFAULT');">Procesamiento de Peticiones</button>
</body>
</html>

El resultado queda de la siguiente manera:

Además de añadir o quitar los botones que te interese, si quieres que los botones tengan un estilo diferente, alineado con tus colores corporativos, basta con que modifiques el bloque de estilos del código HTML incrustado.

A continuación se muestran ejemplos de diseño alternativos:

Botonera verde

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mi-boton {
        background-color: #A3C644; /* Verde del logotipo */
        color: white; /* Texto en blanco para contraste */
        border: 2px solid #005F6B; /* Azul oscuro del logotipo */
        padding: 8px 15px;
        text-align: center;
        display: inline-block;
        margin: 5px 2px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        transition: background-color 0.3s, transform 0.2s;
      }
      .mi-boton:hover {
        background-color: #005F6B; /* Cambia a azul oscuro al pasar el cursor */
        color: #A3C644; /* Texto en verde */
        transform: scale(1.05); /* Efecto de agrandamiento */
      }
      h3 {
        color: #005F6B; /* Azul oscuro para los encabezados */
        font-family: Arial, sans-serif;
        text-transform: uppercase;
      }
    </style>
  </head>
<body>
<h3>&nbsp;Maestros</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('220', null, 'DEFAULT');">Terceros</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('180', null, 'DEFAULT');">Productos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('191', null, 'DEFAULT');">Tarifas</button>
<h3>&nbsp;Ventas</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F87F1EB7EB404F1F916EBAFAD1A0A334', null, 'DEFAULT');">Presupuesto de Ventas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('186', null, 'DEFAULT');">Pedidos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('D9471EE279D641B8BCCCC610D8FC40B1', null, 'DEFAULT');">Preparación</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('257', null, 'DEFAULT');">Albaranes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('263', null, 'DEFAULT');">Facturas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F039BA97E647457B9607A003BF3DA049', null, 'DEFAULT');">Ventas pendientes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('2EEB7E59D77F46F2AE308F34C06051E1', null, 'DEFAULT');">Cubo comercial</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('8865572DD3344760BFD8002397076591', null, 'DEFAULT');">Cola de Mails</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('CD573DF1E351485EA2B2DE487DCACA6F', null, 'DEFAULT');">Procesamiento de Peticiones</button>
</body>
</html>

Botones grandes

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Estilo para los botones */
      .mi-boton {
        background: #B22222; /* Rojo oscuro como color principal */
        color: white;
        border: none;
        padding: 15px 20px; /* Botones altos */
        text-align: center;
        display: inline-block;
        margin: 8px 4px; /* Espacio entre botones */
        cursor: pointer;
        border-radius: 0; /* Esquinas rectas */
        font-size: 16px; /* Texto más grande */
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
        transition: transform 0.2s, box-shadow 0.2s, background 0.2s; /* Transición suave */
      }

      /* Estilo al pasar el ratón por encima del botón */
      .mi-boton:hover {
        transform: translateY(-2px); /* Efecto de flotación */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        background: linear-gradient(45deg, #FF7F00, #FF4500); /* Degradado a naranja */
      }

      /* Estilo para los títulos */
      h3 {
        color: #B22222; /* Rojo oscuro */
        font-family: Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 10px;
      }

      /* Estilo del cuerpo */
      body {
        font-family: Arial, sans-serif;
        background-color: #FDF5E6; /* Fondo claro y cálido */
        margin: 20px;
      }
    </style>
  </head>
<body>
<h3>&nbsp;Maestros</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('220', null, 'DEFAULT');">Terceros</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('180', null, 'DEFAULT');">Productos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('191', null, 'DEFAULT');">Tarifas</button>
<h3>&nbsp;Ventas</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F87F1EB7EB404F1F916EBAFAD1A0A334', null, 'DEFAULT');">Presupuesto de Ventas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('186', null, 'DEFAULT');">Pedidos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('D9471EE279D641B8BCCCC610D8FC40B1', null, 'DEFAULT');">Preparación</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('257', null, 'DEFAULT');">Albaranes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('263', null, 'DEFAULT');">Facturas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F039BA97E647457B9607A003BF3DA049', null, 'DEFAULT');">Ventas pendientes</button>
</body>
</html>

Botones con degradado

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Estilo para los botones */
      .mi-boton {
        background: linear-gradient(to right, #B22222, #FF4500); /* Degradado horizontal */
        color: white;
        border: none;
        padding: 15px 20px; /* Botones altos */
        text-align: center;
        display: inline-block;
        margin: 8px 4px; /* Espacio entre botones */
        cursor: pointer;
        border-radius: 0; /* Esquinas rectas */
        font-size: 16px; /* Texto más grande */
        font-weight: bold;
        text-transform: uppercase;
        position: relative; /* Necesario para el borde inferior */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
        transition: transform 0.2s, box-shadow 0.2s, background 0.2s; /* Transición suave */
      }

      /* Borde inferior destacado */
      .mi-boton::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Espacio desde el borde inferior del botón */
        left: 0;
        width: 100%;
        height: 4px; /* Altura del borde inferior */
        background: #FF7F00; /* Color del borde inferior */
        transition: transform 0.2s; /* Animación del borde */
      }

      /* Estilo al pasar el ratón por encima del botón */
      .mi-boton:hover {
        transform: translateY(-2px); /* Efecto de flotación */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra más marcada */
      }

      .mi-boton:hover::after {
        transform: scaleX(1.1); /* Ampliar ligeramente el borde inferior */
      }

      /* Estilo para los títulos */
      h3 {
        color: #B22222; /* Rojo oscuro */
        font-family: Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 10px;
      }

      /* Estilo del cuerpo */
      body {
        font-family: Arial, sans-serif;
        background-color: #FDF5E6; /* Fondo claro y cálido */
        margin: 20px;
      }
    </style>
  </head>
<body>
<h3>&nbsp;Maestros</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('220', null, 'DEFAULT');">Terceros</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('180', null, 'DEFAULT');">Productos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('191', null, 'DEFAULT');">Tarifas</button>
<h3>&nbsp;Ventas</h3>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F87F1EB7EB404F1F916EBAFAD1A0A334', null, 'DEFAULT');">Presupuesto de Ventas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('186', null, 'DEFAULT');">Pedidos</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('D9471EE279D641B8BCCCC610D8FC40B1', null, 'DEFAULT');">Preparación</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('257', null, 'DEFAULT');">Albaranes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('263', null, 'DEFAULT');">Facturas</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('F039BA97E647457B9607A003BF3DA049', null, 'DEFAULT');">Ventas pendientes</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('2EEB7E59D77F46F2AE308F34C06051E1', null, 'DEFAULT');">Cubo comercial</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('8865572DD3344760BFD8002397076591', null, 'DEFAULT');">Cola de Mails</button>
<button class="mi-boton" onclick="OB.Utilities.openDirectTab('CD573DF1E351485EA2B2DE487DCACA6F', null, 'DEFAULT');">Procesamiento de Peticiones</button>
</body>
</html>

Crear botones de acceso rápido

Añadir un widget HTML

Botonera verde

Botones grandes

Botones con degradado

Relacionado