Efecto de desplazamiento de botón animado CSS

Abrir en el editor Publica tu código

Recomendado

8 February 2025

Formulario de contacto con CSS

5 June 2024

<!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>

Efecto de desplazamiento de botón animado CSS

Recomendado

Botón flotante

Formulario de contacto con CSS

Página de inicio de sesión 3D

HTML

CSS

JS

Recomendado

Botón flotante

Formulario de contacto con CSS

Página de inicio de sesión 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS