El diseño web es una parte esencial de cualquier proyecto en línea, y los botones son elementos clave en la experiencia del usuario. En este artículo, exploraremos cómo puedes crear un atractivo efecto «hover» para botones CSS en tu sitio web. Este efecto, que se activa cuando el usuario pasa el cursor sobre el botón, puede hacer que tu sitio web sea más atractivo y profesional. Te mostraremos un ejemplo de código y cómo personalizarlo para que se ajuste a tus necesidades.
El Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Efecto Over Btn CSS</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<a href="#">Dale like</a>
</body>
</html>El Código CSS
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: monospace;
}
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
text-transform: uppercase;
color: white;
padding: 20px;
border: 3px solid blueviolet ;
width: 200px;
font-size: 22px;
letter-spacing: 4px;
overflow: hidden;
z-index: 1;
transform: color 1s, box-shadow 1s;
transition-delay: 0s, 1s;
cursor: pointer;
font-weight: 600;
border-radius: 10px;
}
a:hover {
border: 3px solid white ;
}
a::before {
content: '';
height: 65px;
width: 0px;
transform: skew(35deg);
position: absolute;
left: -65px;
background: blueviolet;
transition: all 1s;
z-index: -1;
}
a:hover::before {
width: 400px;
}Creando el Efecto «Hover» para Botones CSS:
El código proporcionado crea un efecto «hover» atractivo para los botones CSS. Aquí hay una explicación de las partes clave:
Conclusión:
Crear un efecto «hover» atractivo para los botones CSS puede mejorar significativamente la apariencia de tu sitio web y la experiencia del usuario. Este ejemplo de código te proporciona una base sólida para empezar, pero recuerda que puedes personalizarlo aún más según tus preferencias y necesidades específicas. Experimenta con diferentes colores, tamaños y transiciones para lograr el aspecto perfecto para tus botones. ¡Haz que tu sitio web destaque con estos atractivos efectos de botones CSS!
