Efeito de foco de botão animado em CSS

427 webleb

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

Efeito de embaralhamento de texto

29 September 2025

Animação de carregamento CSS com imagem de fundo

7 November 2024

Faixa de opções CSS

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>

Recomendado

Efeito de embaralhamento de texto

Animação de carregamento CSS com imagem de fundo

Faixa de opções CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS