Efecto Hover Botón con HTML y CSS

CSS, Desarrollo Web, HTML / Por

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.

Pruébalo aquí: (Link)

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!

VISTA PREVIA

Related Posts