Pressed Effect Mixin

About Pressed Effect Mixin

This mixin adds beautiful press animations to any element. It creates a radial gradient effect that spreads from elment's center point, providing visual feedback for both touch and mouse interactions. Perfect for buttons, cards, and interactive elements.

Basic Usage

Card Element

Click to see pressed effect

⭐

📊 Effect Counter

Track how many times the pressed effect has been triggered:

Press Count: 0

🎨 Color Variations

Try different background colors to see how the effect adapts:

Test Element (Click to change color)

📖 Implementation Guide

How to Use the Pressed Effect Mixin:

1. Import the custom element (this registers <pressed-effect-mixin> automatically): import './mixins/pressed-effect-mixin/pressed-effect-mixin.js';

2. Wrap any element you want to make press-responsive:

<pressed-effect-mixin>
            <button>Press me!</button>
          </pressed-effect-mixin>

3. Optionally style the .pressed class in CSS for additional scale/transform.

          // Example with native HTML only – no JS required
          <pressed-effect-mixin>
            <div class="demo-card">Pressable content</div>
          </pressed-effect-mixin>
        

✨ Features

What the Pressed Effect Mixin Provides:

Touch Support: Works on mobile devices with touch events
Mouse Support: Works on desktop with mouse events
Radial Animation: Creates a spreading effect from element's center point
Automatic Color Detection: Detects the element's background color
Fixed 700 ms Duration: Consistent timing across all elements
Non-Intrusive: Doesn't interfere with existing event handlers

Advanced Usage

Another Card

With different color

🎯

🎯 Pressed Effect Mixin