Los efectos CSS pueden dar vida a tu sitio web y hacer que tus elementos resalten. En este tutorial, te enseñaremos cómo crear un efecto «Hover» Botón CSS para tus botones, utilizando un código HTML y CSS simple. Con este efecto, tus enlaces se volverán aún más atractivos y agradables a la vista, lo que puede mejorar significativamente la experiencia del usuario en tu sitio web.
Cómo Crear un efecto «Hover» para Botones Impresionantes
Paso 1: Configuración del HTML
En primer lugar, necesitas tener una estructura HTML básica. Aquí está el código HTML que utilizaremos:
<!DOCTYPE html>
<html>
<head>
<title>Efecto Hover Btn CSS</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<a href="#">Dale like</a>
</body>
</html>Este código define un enlace con el texto «Dale like» dentro del cuerpo del documento.
Paso 2: Estilización CSS
Ahora, vamos a aplicar el efecto «Hover» Botón a nuestro enlace utilizando CSS. Aquí tienes el código CSS necesario:
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
text-transform: uppercase;
color: white;
width: 200px;
font-size: 22px;
letter-spacing: 4px;
border: 3px solid blueviolet;
overflow: hidden;
z-index: 1;
font-weight: 500;
border-radius: 10px;
background-image: linear-gradient(to right, blueviolet, transparent);
background-size: 200% 100%;
background-position: right;
background-color: black;
padding: 20px;
}
a:hover {
color: white;
background-image: linear-gradient(to right, darkviolet, transparent);
background-color: black;
}
a::before {
content:'';
height: 100%;
width: 100%;
background-image: linear-gradient(45deg, blueviolet, black);
position: absolute;
top: 0;
left: -100%;
transition: all 0.5s ease;
z-index: -1;
}
a:hover::before {
left: 0;
}Este código CSS aplicará el efecto de transición de color al pasar el cursor sobre el enlace, creando un aspecto visualmente atractivo.
Conclusión
Con este tutorial, has aprendido cómo implementar un efecto «Hover» Botón CSS para tus botones en tu sitio web. Este efecto añade un toque de estilo y sofisticación a tus enlaces, lo que puede ayudar a mejorar la experiencia del usuario y hacer que tus botones sean más llamativos. Experimenta con diferentes colores y ajustes para personalizar este efecto según tus necesidades y estilo de diseño. ¡Haz que tus botones destaquen y cautiven a tus visitantes!
