Button AI Animation

sachin007
Jan 17, 2026 2
Live Preview

Live Editor

<button class="ai-button">
        <i class="fas fa-robot ai-icon"></i>
        <span>Animation AI MODE</span>
    </button>
.ai-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 20px 50px;
            background: linear-gradient(90deg, #0d1b2a, #1b263b, #415a77);
            color: #fff;
            font-size: 22px;
            font-weight: 600;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 
                0 0 25px rgba(0, 200, 255, 0.4),
                inset 0 0 15px rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            z-index: 1;
        }
        
        .ai-icon {
            position: relative;
            font-size: 2rem;
            color: #00eeff;
            animation: pulse 2s infinite;
            z-index: 2;
        }
        
        @keyframes pulse {
            0% {
                text-shadow: 0 0 5px #00eeff;
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 20px #00eeff, 0 0 30px #00eeff;
                transform: scale(1.1);
            }
            100% {
                text-shadow: 0 0 5px #00eeff;
                transform: scale(1);
            }
        }
        
        .ai-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(90deg, transparent 30%, rgba(0, 238, 255, 0.1) 50%, transparent 70%),
                repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 238, 255, 0.05) 3px, rgba(0, 238, 255, 0.05) 4px);
            background-size: 200% 100%, 10px 10px;
            border-radius: 60px;
            animation: neuralMove 3s linear infinite, scanLine 8s linear infinite;
            z-index: -1;
        }
        
        @keyframes neuralMove {
            0% { background-position: -200% 0, 0 0; }
            100% { background-position: 200% 0, 20px 20px; }
        }
        
        @keyframes scanLine {
            0% { background-position: -200% 0, 0 0; }
            100% { background-position: 200% 0, 0 0; }
        }
        
        .ai-button::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00eeff, #0066ff, #00eeff, #0066ff);
            border-radius: 62px;
            z-index: -2;
            filter: blur(10px);
            opacity: 0.7;
            animation: rotateBorder 4s linear infinite;
        }
        
        @keyframes rotateBorder {
            0% { filter: hue-rotate(0deg) blur(10px); }
            100% { filter: hue-rotate(360deg) blur(10px); }
        }
        
        .ai-button:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 40px rgba(0, 200, 255, 0.7),
                0 10px 30px rgba(0, 0, 0, 0.4),
                inset 0 0 20px rgba(255, 255, 255, 0.15);
            letter-spacing: 2px;
        }
        
        .ai-button:hover .ai-icon {
            animation: pulse 0.8s infinite;
        }
        
        .ai-button:active {
            transform: translateY(2px);
            box-shadow: 
                0 0 20px rgba(0, 200, 255, 0.5),
                0 5px 15px rgba(0, 0, 0, 0.3),
                inset 0 0 15px rgba(0, 0, 0, 0.2);
        }
        
        .ai-button span {
            position: relative;
            z-index: 2;
            text-shadow: 0 0 10px rgba(0, 238, 255, 0.8);
            animation: textGlow 3s infinite alternate;
        }
        
        @keyframes textGlow {
            0% { text-shadow: 0 0 10px rgba(0, 238, 255, 0.8); }
            100% { text-shadow: 0 0 20px rgba(0, 238, 255, 1), 0 0 30px rgba(0, 238, 255, 0.6); }
        }
Categories

Button AI Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
