Discover the Stylish and Modern Metallic Buttons for Interactive Design

Hey there, fellow developers and designers! 👋

At The Next Labs, we’re all about crafting components that combine innovation and style. Today, we’re excited to introduce the Enhanced Metallic Buttons — a stunning and interactive UI element that adds a polished and professional vibe to your projects. ✨

Why Metallic Buttons?

Let’s face it: buttons are everywhere. They’re one of the most clicked components on any website, so why not make them unforgettable? These metallic buttons come with a sleek design, smooth hover effects, and customizable options to fit your brand’s personality.

Key Features of Metallic Buttons

1️⃣ Dynamic Variants

Our component supports two distinct variants:

• Silver for a modern, neutral look.

• Green for a fresh and vibrant touch.

This flexibility ensures that you can adapt the buttons to your design theme effortlessly.

2️⃣ Interactive Hover Effects

We’ve integrated 3D hover animations using Framer Motion for an engaging experience. These buttons react to user interactions with subtle rotations and smooth transitions, giving them a tactile, real-world feel.

3️⃣ Customizable and Accessible

With customizable classes, gradient backgrounds, and clear typography, this component is not only beautiful but also highly adaptable to any project.

---

How It Works 💡

Here’s a quick breakdown of the code:

The MetallicButton Component

This React component uses Next.js for routing and Framer Motion for animations. Let’s dive into its structure:

'use client'

import React from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { UrlObject } from 'url'

interface MetallicButtonProps {
  href: string | UrlObject
  children: React.ReactNode
  className?: string
  variant?: 'silver' | 'green'
}

const MetallicButton: React.FC<MetallicButtonProps> = ({ 
  href, 
  children, 
  className = '',
  variant = 'silver'
}) => {
  const baseColor = variant === 'silver' 
    ? 'from-gray-300 via-gray-100 to-gray-300'
    : 'from-green-300 via-green-100 to-green-300'

  const shadowColor = variant === 'silver'
    ? 'shadow-gray-400'
    : 'shadow-green-400'

  return (
    <Link href={href} passHref>
      <motion.div
        className={`
          relative overflow-hidden rounded-lg 
          ${className}
          bg-gradient-to-r ${baseColor}
          shadow-lg ${shadowColor} 
          transform-gpu perspective-1000
        `}
        initial={{ rotateX: 0, rotateY: 0 }}
        whileHover={{ rotateX: 5, rotateY: 5 }}
        transition={{ type: 'spring', stiffness: 400, damping: 10 }}
      >
        <motion.div
          className="absolute inset-0 bg-white opacity-0"
          initial={{ x: '-100%' }}
          whileHover={{ x: '100%', opacity: 0.3 }}
          transition={{ duration: 0.5, ease: 'easeInOut' }}
        />
        <motion.div
          className={`
            relative px-6 py-3 
            text-gray-800 font-semibold text-center
            border-t border-l border-white border-opacity-30
            ${variant === 'silver' ? 'text-gray-700' : 'text-green-700'}
          `}
        >
          {children}
        </motion.div>
      </motion.div>
    </Link>
  )
}

export default MetallicButton

Integrating the Buttons

Here’s how you can use these buttons in your Next.js project:

import MetallicButton from '../components/MetallicButton'

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold mb-8">Enhanced Metallic Buttons</h1>
      <MetallicButton href="/about" className="mb-4" variant="silver">
        About Us (Silver)
      </MetallicButton>
      <MetallicButton href="/contact" variant="green">
        Contact (Green)
      </MetallicButton>
    </div>
  )
}

---

The Magic Behind the Design 🪄

These buttons come to life with the combination of:

1. Gradient Backgrounds: Smooth gradients for that sleek metallic effect.

2. Shadowing: Carefully tuned shadows for depth and realism.

3. Framer Motion Animations: Real-time 3D rotations and subtle hover highlights.

---

Where Can You Use Them? 🤔

The possibilities are endless! Here are a few ideas:
✅ Landing pages to grab attention.
✅ Call-to-action buttons to drive conversions.
✅ Product showcases for an interactive user experience.

---

Ready to Enhance Your Website?

The Enhanced Metallic Buttons are the perfect blend of style and functionality. If you’re ready to level up your UI game, give this component a try! 🚀

Let us know in the comments how you’d use these buttons or share your ideas to make them even better. 🌟

Follow The Next Labs for more exciting components and design inspiration!