Tarjeta con Borde Animado
Categoría: Tarjetas
Tarjeta con borde que se anima al pasar el ratón
Vista Previa:
Tarjeta con Borde
Pasa el ratón para ver el borde animado
📚 Explicación del Efecto:
Usa un pseudoelemento ::before para crear un borde que aparece y se escala al hacer hover.
Código Exportable
CSS
HTML
.tarjeta-borde {
background: white;
border-radius: 10px;
padding: 20px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.tarjeta-borde::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-radius: 10px;
transition: all 0.3s ease;
}
.tarjeta-borde:hover::before {
border-top-color: #667eea;
border-right-color: #764ba2;
border-bottom-color: #667eea;
border-left-color: #764ba2;
transform: scale(1.05);
}<div class="tarjeta-borde">
<h3>Tarjeta con Borde</h3>
<p>Pasa el ratón para ver el borde animado</p>
</div>