Pulse Button Effect

A small, lightweight UI component demonstrating an animated "pulse" effect for buttons. This project shows how to combine simple HTML, CSS, and JavaScript to create an accessible, responsive, and customizable button animation that can be dropped into any web project.

Preview

Table of Contents

• Pulse Button Effect
  • Preview
  • Table of Contents
  • Technologies Used
  • Features
  • Installation
  • Accessibility
  • Browser Support
  • Contributing
  • License
  • Author

Technologies Used

• HTML
  • Responsible for the semantic structure and the button element markup.
  • Uses accessible button markup (role, aria attributes where appropriate).
• CSS
  • Handles all visual styling and animations (pulse, transitions).
  • Uses CSS variables for easy theming and customization.
  • Uses modern layout techniques (flexbox) and prefers hardware-accelerated transforms.
• JavaScript
  • Adds interaction hooks (e.g., click/touch, keyboard activation).
  • Optionally toggles classes, handles cleanup of animation elements, and exposes a small API to programmatically trigger the pulse.
  • Keeps behavior unobtrusive: if JS is disabled the button still degrades gracefully (basic styling and click behavior remain).

Features

• Smooth pulse animation on hover/focus/click
• Lightweight — minimal CSS and JS
• Customizable via CSS variables:
  • --pulse-color
  • --pulse-duration
  • --pulse-scale
• Accessible: supports keyboard focus styles and ARIA-friendly markup
• Responsive: scales and looks good across device sizes
• Graceful fallback when JavaScript is disabled

Installation

git clone https://github.com/mihaiapostol14/pulse-button-effct.git
cd pulse-button-effct

Accessibility

• Button uses native element to preserve keyboard behavior.
• Focus states are clearly visible; the pulse is present on focus for keyboard users.
• Ensure color contrast of the base button label meets WCAG guidelines when adjusting colors.

Browser Support

This component uses modern CSS features (transforms, transitions, CSS variables). It works in current evergreen browsers:

• Chrome
• Edge
• Firefox
• Safari

If you need to support older browsers that lack CSS variable support, consider providing fallback values or pre-processing CSS to static values.

Contributing

Contributions are welcome. Please open issues for bugs or feature requests, and submit pull requests for fixes or improvements. Keep changes focused and include tests or a demo where applicable.

Suggested workflow:

1. Fork the repo
2. Create a feature branch
3. Make changes and add examples
4. Open a pull request describing your changes

License

This project is offered under the MIT License. See the LICENSE file for details.

Author

Mihai Apostol