Efecto de desplazamiento de botón animado CSS

1,577 webleb

Abrir en el editor Publica tu código

Efecto de desplazamiento de botón animado CSS

Recomendado

13 June 2025

Un código de Metehan

24 February 2025

Botón pulsador de inicio de CodePen

16 December 2025

Barra de navegación HTML con menú desplegable y estilo

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