El mejor software administrativo para escalar tu empresa

Conoce más

<!-- Estilos CSS -->
<style>
/* Definición de la animación slideUp */
@keyframes slideUp {
  from {
    transform: translateY(100%); /* Empieza desde fuera del área visible hacia abajo */
    opacity: 0; /* Comienza siendo invisible */
  }
  to {
    transform: translateY(0); /* Llega a su posición final */
    opacity: 1; /* Se vuelve completamente visible */
  }
}

/* Estilos para el contenedor de la tarjeta */
.card {
  position: relative; /* Posición relativa para colocar elementos hijos en relación a este contenedor */
  width: 400px; /* Ancho del contenedor */
  height: 200px; /* Altura del contenedor */
  background: linear-gradient(0deg, #26A8FF 0%, #00164A 150%); /* Gradiente de color de fondo */
  display: flex; /* Modelo de caja flexible */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente los elementos */
  padding: 12px; /* Espacio interno */
  gap: 12px; /* Espacio entre los elementos */
  border-radius: 8px; /* Bordes redondeados del contenedor */
  cursor: pointer; /* Cambia el cursor a pointer al pasar sobre la tarjeta */
  align-items: center; /* Centra horizontalmente los elementos */
  text-align: center; /* Centra el texto */
  animation: slideUp 1s ease-out; /* Aplica la animación slideUp con duración de 1 segundo */
}

/* Estilos para el pseudo-elemento before de la tarjeta */
.card::before {
  content: ''; /* Contenido vacío para aplicar estilos */
  position: absolute; /* Posición absoluta para superponer sobre el contenedor principal */
  inset: 0; /* Ajuste de todos los bordes a cero */
  left: -5px; /* Desplazamiento a la izquierda */
  margin: auto; /* Centrado automático */
  width: 410px; /* Ancho del pseudo-elemento */
  height: 210px; /* Altura del pseudo-elemento */
  border-radius: 10px; /* Bordes redondeados */
  background: linear-gradient(-45deg, #26A8FF 0%, #00164A 100%); /* Gradiente de color de fondo */
  z-index: -10; /* Nivel de superposición */
  pointer-events: none; /* No permite la interacción con el pseudo-elemento */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transición con curva de bezier personalizada */
}

/* Estilos para el pseudo-elemento after de la tarjeta */
.card::after {
  content: ""; /* Contenido vacío para aplicar estilos */
  z-index: -1; /* Nivel de superposición */
  position: absolute; /* Posición absoluta */
  inset: 0; /* Ajuste de todos los bordes a cero */
  background: linear-gradient(-45deg, #00164A 0%, #00164A 100%); /* Gradiente de color de fondo */
  transform: translate3d(0, 0, 0) scale(0.95); /* Transformación 3D y escalado */
  filter: blur(20px); /* Desenfoque */
}

/* Estilos para el logo */
.logo {
  position: absolute; /* Posición absoluta */
  top: 0px; /* Ajuste de posición superior */
  max-width: 200px; /* Ancho máximo del logo */
  max-height: 80px; /* Altura máxima del logo */
  margin: auto; /* Centrado automático */
}

/* Estilos para el encabezado */
.heading {
  font-size: 16px; /* Tamaño de fuente */
  font-weight: 700; /* Grosor de fuente */
  color: #fff; /* Color del texto */
  line-height: 1; /* Altura de línea */
  text-align: center; /* Alineación del texto al centro */
  margin-top: 70px; /* Margen superior */
  padding-right: 40px; /* Espaciado a la derecha */
  padding-left: 40px; /* Espaciado a la izquierda */
}

/* Efectos al pasar el ratón sobre la tarjeta */
.card:hover::after {
  filter: blur(30px); /* Aumenta el desenfoque */
}

.card:hover::before {
  transform: rotate(-90deg) scaleX(0.52) scaleY(1.95); /* Rotación y escalado */
}

/* Estilos para el botón */
.button {
  display: inline-block; /* Visualización en línea como bloque */
  position: relative; /* Posición relativa */
  padding: 15px 20px; /* Espaciado interno */
  margin-top: -10px; /* Margen superior negativo */
  border-radius: 7px; /* Bordes redondeados */
  font-size: 14px; /* Tamaño de fuente */
  text-transform: uppercase; /* Texto en mayúsculas */
  font-weight: 600; /* Grosor de fuente */
  letter-spacing: 2px; /* Espaciado entre letras */
  background: #26A8FF; /* Color de fondo */
  color: #fff; /* Color del texto */
  overflow: hidden; /* Oculta el desbordamiento */
  text-decoration: none; /* Sin subrayado */
  box-shadow: 0 0 0 0 transparent; /* Sombra transparente */
  -webkit-transition: all 0.2s ease-in; /* Transición para navegadores WebKit */
  -moz-transition: all 0.2s ease-in; /* Transición para navegadores Mozilla */
  transition: all 0.2s ease-in; /* Transición */
}

/* Efectos al pasar el ratón sobre el botón */
.button:hover {
  background: #26A8FF; /* Cambiar color de fondo */
  box-shadow: 0 0 30px 5px rgba(38, 168, 255, 0.815); /* Ajuste de sombra */
  color: #ffffff; /* Cambiar color del texto */
  -webkit-transition: all 0.2s ease-out; /* Transición para navegadores WebKit */
  -moz-transition: all 0.2s ease-out; /* Transición para navegadores Mozilla */
  transition: all 0.2s ease-out; /* Transición */
}

.button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear; /* Animación para navegadores WebKit */
  -moz-animation: sh02 0.5s 0s linear; /* Animación para navegadores Mozilla */
  animation: sh02 0.5s 0s linear; /* Animación */
}

/* Pseudo-elemento before del botón */
.button::before {
  content: ''; /* Contenido vacío */
  display: block; /* Mostrar como bloque */
  width: 0px; /* Ancho inicial */
  height: 86%; /* Altura */
  position: absolute; /* Posición absoluta */
  top: 7%; /* Ajuste de posición superior */
  left: 0%; /* Ajuste de posición izquierda */
  opacity: 0; /* Inicialmente invisible */
  background: #fff; /* Color de fondo */
  box-shadow: 0 0 30px 30px #fff; /* Sombra */
  -webkit-transform: skewX(-20deg); /* Transformación en eje X para navegadores WebKit */
  -moz-transform: skewX(-20deg); /* Transformación en eje X para navegadores Mozilla */
  -ms-transform: skewX(-20deg); /* Transformación en eje X para navegadores Microsoft */
  -o-transform: skewX(-20deg); /* Transformación en eje X para navegadores Opera */
  transform: skewX(-20deg); /* Transformación en eje X */
}

/* Definición de la animación sh02 */
@keyframes sh02 {
  from {
    opacity: 0; /* Comienza siendo invisible */
    left: 0%; /* Posición inicial */
  }
  50% {
    opacity: 1; /* Se vuelve visible a la mitad */
  }
  to {
    opacity: 0; /* Vuelve a ser invisible */
    left: 100%; /* Posición final */
  }
}

/* Estilos al hacer clic en el botón */
.button:active {
  background: #26A8FF; /* Mantener el color de fondo */
  color: #ffffff; /* Mantener el color del texto */
  box-shadow: 0 0 30px 5px rgba(38, 168, 255, 0.815); /* Mantener la sombra */
  -webkit-transition: box-shadow 0.2s ease-in; /* Transición para navegadores WebKit */
  -moz-transition: box-shadow 0.2s ease-in; /* Transición para navegadores Mozilla */
  transition: box-shadow 0.2s ease-in; /* Transición */
}
</style>

<!-- Contenedor principal de la tarjeta -->
<div class="card">
  <!-- Logo de la tarjeta -->
  <img src="https://www.issaservice.com.mx/wp-content/uploads/2024/05/Siigo-Aspel.png" alt="Logo" class="logo">
  <!-- Encabezado de la tarjeta -->
  <p class="heading">El mejor software administrativo para escalar tu empresa</p>
  <!-- Botón de la tarjeta -->
  <a href="https://www.issaservice.com.mx/aspel/" class="button">Conoce más</a>
</div>