Learn how to create a smooth, natural hand wave animation using pure CSS. This tutorial includes a waving hand emoji, a pointing hand button with a click effect, and a fully responsive design — all without any JavaScript! Customize the animation speed, colors, and emojis to fit your style

HTML & CSS Code 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Hand Wave Animation</title>

    <style>

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background: #f0f0f0;

            font-family: Arial, sans-serif;

        }

        .container {

            text-align: center;

        }

        .hand-wave {

            display: inline-block;

            font-size: 5rem;

            animation: wave 1.5s infinite;

            transform-origin: 70% 70%;

            margin-bottom: 2rem;

        }

        @keyframes wave {

            0% { transform: rotate(0deg); }

            10% { transform: rotate(14deg); }

            20% { transform: rotate(-8deg); }

            30% { transform: rotate(14deg); }

            40% { transform: rotate(-4deg); }

            50% { transform: rotate(10deg); }

            60% { transform: rotate(0deg); }

            100% { transform: rotate(0deg); }

        }

        .btn {

            position: relative;

            padding: 12px 24px;

            font-size: 1.2rem;

            background: #4CAF50;

            color: white;

            border: none;

            border-radius: 50px;

            cursor: pointer;

            overflow: hidden;

        }

        .btn .point-hand {

            position: absolute;

            right: -20px;

            animation: point 1s infinite alternate ease-in-out;

        }

        @keyframes point {

            from { transform: translateX(0); }

            to { transform: translateX(10px); }

        }

        .btn:active .point-hand {

            animation: press 0.3s ease;

        }

        @keyframes press {

            0% { transform: translateX(10px) scale(1); }

            50% { transform: translateX(10px) scale(0.8); }

            100% { transform: translateX(10px) scale(1); }

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="hand-wave">👋</div>

        <h1>Hello There!</h1>

        <button class="btn">

            Click Me

            <span class="point-hand">👉</span>

        </button>

    </div>

</body>

</html>
Features Included:
  • Waving Hand (👋) - Smooth natural wave animation
  • Pointing Hand Button - With "click me" CTA that:
    • Points toward the button (👉)
    • Squishes slightly when clicked
  • Responsive Design - Works on all screen sizes
  • Pure CSS - No JavaScript required
How to Customize:
  • Change hand emojis (try ✋, 🖐️, or 🤚)
  • Adjust animation speed by changing 1.5s / 1s durations
  • Modify colors in the .btn class
  • Make the wave bigger by increasing font-size in .hand-wave

Want me to modify anything (like adding a dragging hand or more complex SVG animation)? Let me know! ✨