Efecto de desplazamiento de botón animado CSS

1,218 webleb

Abrir en el editor Publica tu código

Efecto de desplazamiento de botón animado CSS

Recomendado

13 April 2024

Botón de alternancia HTML CSS

8 November 2023

Menú Animado

19 February 2026

Formulario de inicio de sesión holográfico 3D HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated CSS Button</title>
    <style>
        /* Basic styling for centering the button */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

/* Animated Button Styles */
        .animated-button {
            padding: 15px 30px;
            font-size: 1.2em;
            font-weight: bold;
            color: #ffffff; /* Initial text color */
            background-color: #3498db; /* Initial background color */
            border: none;
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden; /* Crucial for containing the pseudo-element */
            position: relative; /* Needed for positioning the pseudo-element */
            transition: color 0.4s ease-out; /* Smooth transition for text color */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
            outline: none; /* Remove outline on focus */
            z-index: 1; /* Ensure button content is above pseudo-element */
        }

/* Pseudo-element for the animated background slide */
        .animated-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2ecc71; /* New background color on hover */
            z-index: -1; /* Place behind the button text */
            transform: translateX(-100%); /* Start completely to the left, outside the button */
            transition: transform 0.4s ease-out; /* Smooth transition for the slide effect */
        }

/* Hover and Focus States */
        .animated-button:hover,
        .animated-button:focus {
            color: #ffffff; /* Text color remains white on hover/focus */
        }

.animated-button:hover::before,
        .animated-button:focus::before {
            transform: translateX(0); /* Slide the background in from the left */
        }

/* Optional: Add a slight scale effect on active (click) */
        .animated-button:active {
            transform: scale(0.98);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <button class="animated-button">Hover Me</button>
</body>
</html>

CSS