<style> /* CSS OPTIMIZADO CON CENTRADO PERFECTO */ .btn-slide-final { --btn-color: #3b82f6; /* Color base */ position: relative; display: inline-flex; align-items: center; justify-content: center; height: 50px; width: 200px; margin: 10px; border-radius: 50px; background: transparent; border: 2px solid var(--btn-color); transition: all 0.4s ease; overflow: hidden; text-decoration: none; font-family: Arial, sans-serif; text-align: center; /* Aseguramos centrado */ } /* Círculo del botón - posición absoluta corregida */ .btn-slide-final .btn-icon { position: absolute; left: 4px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--btn-color); color: white; transition: all 0.4s ease; z-index: 2; } /* Contenedor de texto para centrado perfecto */ .btn-slide-final .btn-text-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-left: 40px; /* Compensa el círculo */ box-sizing: border-box; transition: all 0.4s ease; } /* Texto visible */ .btn-slide-final .btn-text { color: var(--btn-color); font-size: 16px; font-weight: 600; transition: all 0.4s ease; width: 100%; text-align: center; margin-left: -20px; /* Compensación precisa */ } /* Texto hover */ .btn-slide-final .btn-hover-text { position: absolute; color: white; font-size: 16px; font-weight: 600; opacity: 0; transition: all 0.4s ease; width: 100%; text-align: center; margin-left: -20px; /* Compensación igual que el texto normal */ } /* Efectos hover */ .btn-slide-final:hover { background: var(--btn-color); } .btn-slide-final:hover .btn-icon { transform: translateX(150px); background: white; color: var(--btn-color); } .btn-slide-final:hover .btn-text { opacity: 0; transform: translateX(-10px); } .btn-slide-final:hover .btn-hover-text { opacity: 1; } /* VARIANTES PARA 5 USOS DIFERENTES */ .btn-download { --btn-color: #28a745; /* Verde para descargas */ } .btn-warning { --btn-color: #ffc107; /* Amarillo para advertencias */ color: #333; /* Texto oscuro para mejor contraste */ } .btn-danger { --btn-color: #dc3545; /* Rojo para acciones peligrosas */ } .btn-premium { --btn-color: #6f42c1; /* Morado para funciones premium */ } .btn-info { --btn-color: #17a2b8; /* Azul claro para información */ } </style> <!-- 5 BOTONES PARA DIFERENTES USOS --> <!-- 1. Botón principal/default --> <a class="btn-slide-final" href="#"> <span class="btn-icon"><i class="fa fa-link"></i></span> <span class="btn-text-container"> <span class="btn-text">IR AL LINK</span> <span class="btn-hover-text">ABRIR</span> </span> </a> <!-- 2. Botón de descarga --> <a class="btn-slide-final btn-download" href="#"> <span class="btn-icon"><i class="fa fa-download"></i></span> <span class="btn-text-container"> <span class="btn-text">DESCARGAR</span> <span class="btn-hover-text">GUARDAR</span> </span> </a> <!-- 3. Botón de advertencia --> <a class="btn-slide-final btn-warning" href="#"> <span class="btn-icon"><i class="fa fa-exclamation"></i></span> <span class="btn-text-container"> <span class="btn-text">ADVERTENCIA</span> <span class="btn-hover-text">CONFIRMAR</span> </span> </a> <!-- 4. Botón de acción peligrosa --> <a class="btn-slide-final btn-danger" href="#"> <span class="btn-icon"><i class="fa fa-trash"></i></span> <span class="btn-text-container"> <span class="btn-text">ELIMINAR</span> <span class="btn-hover-text">¿SEGURO?</span> </span> </a> <!-- 5. Botón premium/info --> <a class="btn-slide-final btn-premium" href="#"> <span class="btn-icon"><i class="fa fa-star"></i></span> <span class="btn-text-container"> <span class="btn-text">PREMIUM</span> <span class="btn-hover-text">ACTIVAR</span> </span> </a>
