AI Button

sachin007
Jan 17, 2026 2
Live Preview

Live Editor

<button class="ai-mode-btn">
        <i class="fas fa-robot ai-icon"></i>
        <span class="ai-text">ASK ANYTHING WITH AI MODE</span>
    </button>
        
        /* Main Button */
        .ai-mode-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 20px 45px;
            background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
            color: white;
            font-size: 1.4rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            box-shadow: 
                0 10px 25px rgba(0, 102, 255, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
        }
        
        /* AI Icon */
        .ai-icon {
            font-size: 1.6rem;
            color: white;
            animation: pulse 1.5s infinite alternate;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }
            100% {
                transform: scale(1.1);
                text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            }
        }
        
        /* Button Text */
        .ai-text {
            position: relative;
            z-index: 2;
        }
        
        /* Shine Effect */
        .ai-mode-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.7s;
        }
        
        /* Hover Effects */
        .ai-mode-btn:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 15px 35px rgba(0, 102, 255, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.2);
            letter-spacing: 1.5px;
        }
        
        .ai-mode-btn:hover::before {
            left: 100%;
        }
        
        .ai-mode-btn:hover .ai-icon {
            animation: pulse 0.8s infinite alternate;
        }
        
        /* Click Effect */
        .ai-mode-btn:active {
            transform: translateY(-2px);
            box-shadow: 
                0 8px 20px rgba(0, 102, 255, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.15);
        }
        
        /* Subtle Glow */
        .ai-mode-btn::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, #0066ff, #00ccff);
            border-radius: 62px;
            z-index: -1;
            filter: blur(8px);
            opacity: 0.4;
            transition: opacity 0.3s;
        }
        
        .ai-mode-btn:hover::after {
            opacity: 0.6;
        }
 const button = document.querySelector('.ai-mode-btn');
        
        button.addEventListener('click', function() {
            // Ripple effect
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = event.clientX - rect.left - size / 2;
            const y = event.clientY - rect.top - size / 2;
            
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: scale(0);
                animation: ripple 0.6s linear;
                width: ${size}px;
                height: ${size}px;
                top: ${y}px;
                left: ${x}px;
                pointer-events: none;
                z-index: 1;
            `;
            
            this.appendChild(ripple);
            
            // Remove ripple after animation
            setTimeout(() => {
                ripple.remove();
            }, 600);
            
            // Alert for demo
            setTimeout(() => {
                alert("🤖 AI Mode Activated!\n\nYou can now ask anything to the AI assistant.");
            }, 300);
        });
        
        // Add CSS for ripple animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
Categories

AI Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
