# youneslaaroussi/ui-buttons

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/youneslaaroussi-ui-buttons).**

3,792 stars · 262 forks · CSS · MIT

## Links

- GitHub: https://github.com/youneslaaroussi/ui-buttons
- Homepage: https://ui-buttons.web.app
- awesome-repositories: https://awesome-repositories.com/repository/youneslaaroussi-ui-buttons.md

## Topics

`angular` `awesome` `awesome-list` `css` `design` `design-system` `first-timer-friendly` `framework` `free` `frontend` `npm` `react` `vue` `web-design` `web-development` `webcomponents`

## Description

This project is a pure CSS UI library and collection of reusable button components. It provides interactive interface elements that utilize native browser capabilities and hardware-accelerated transforms to deliver visual feedback without the use of JavaScript.

The library distinguishes itself through the use of compositor-driven transforms and geometric clip-path masking. These techniques allow for high-performance visual effects, such as coordinate-based shape morphing and the creation of non-rectangular, slanted button designs.

The component set covers a variety of animated interactions, including radial background expansions, horizontal text reveals, and folding background transitions. These effects are managed via native CSS state transitions and pseudo-element layering to ensure smooth motion and responsive feedback during hover and active states.

## Tags

### User Interface & Experience

- [Button Styles](https://awesome-repositories.com/f/user-interface-experience/button-styles.md) — Provides a collection of visual properties and themes for non-rectangular, custom-styled interactive buttons.
- [Slanted](https://awesome-repositories.com/f/user-interface-experience/button-styles/slanted.md) — Creates buttons with non-rectangular angled edges and specific geometric slanted stylings. ([source](https://ui-buttons.web.app/slanted))
- [Custom Geometry Clipping](https://awesome-repositories.com/f/user-interface-experience/canvas-clipping-utilities/circular-clipping/custom-geometry-clipping.md) — Uses custom geometry clipping to cut HTML elements into non-rectangular shapes for complex visual effects.
- [Coordinate-Based Masking](https://awesome-repositories.com/f/user-interface-experience/clipping-utilities/masking-utilities/clipping-path-applications/coordinate-based-masking.md) — Employs coordinate-based clip-path definitions to create precise geometric boundaries for background fills and text reveals.
- [Compositor-Accelerated Rendering](https://awesome-repositories.com/f/user-interface-experience/compositor-accelerated-rendering.md) — Implements rendering techniques that offload geometric transformations to the browser compositor for high-performance button animations.
- [Interaction Feedback Effects](https://awesome-repositories.com/f/user-interface-experience/interaction-feedback-effects.md) — Triggers radial background fills and scaling effects to provide responsive visual confirmation of user input. ([source](https://ui-buttons.web.app/enlarge))
- [Animated UI Components](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/animated-ui-components.md) — Ships a library of reusable button components that integrate smooth motion effects and transitions.
- [User Interface & Experience](https://awesome-repositories.com/f/user-interface-experience.md) — Implements dynamic visual feedback for clicks and hover states to enhance the overall user experience.
- [CSS3 Hardware-Accelerated Animations](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/element-transitioning-mechanisms/css3-hardware-accelerated-animations.md) — Leverages CSS3 properties and GPU acceleration to ensure high-performance visual transitions for UI elements.
- [Folding Transitions](https://awesome-repositories.com/f/user-interface-experience/background-effects/animated-backgrounds/folding-transitions.md) — Provides buttons that transition a corner from bottom-right to top-left to reveal background colors. ([source](https://ui-buttons.web.app/overfold))
- [Pseudo-Class Interactions](https://awesome-repositories.com/f/user-interface-experience/css-selectors/pseudo-class-interactions.md) — Utilizes pseudo-classes like :hover and :active to trigger immediate visual changes based on user input.
- [CSS State Transitions](https://awesome-repositories.com/f/user-interface-experience/css-state-transitions.md) — Triggers visual transitions using CSS pseudo-classes to reflect changes in button interaction states.
- [Component Background Slides](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/slide-element-animations/component-background-slides.md) — Slides a circular background element to the right during hover or click events for visual feedback. ([source](https://ui-buttons.web.app/bubble-right))

### Part of an Awesome List

- [Radial Expansion Buttons](https://awesome-repositories.com/f/awesome-lists/devtools/android-ui-components/ripple-effect-buttons/animated-effect-buttons/radial-expansion-buttons.md) — Provides buttons that trigger circular background expansion animations when hovered or clicked. ([source](https://ui-buttons.web.app/enlarge))
- [Radial Background Expansions](https://awesome-repositories.com/f/awesome-lists/devtools/android-ui-components/ripple-effect-buttons/animated-effect-buttons/radial-expansion-buttons/radial-background-expansions.md) — Implements buttons that expand circular background fills from the center upon user interaction. ([source](https://ui-buttons.web.app/bubble-right))

### Development Tools & Productivity

- [CSS Component Libraries](https://awesome-repositories.com/f/development-tools-productivity/pre-built-sdk-distributions/ui-component-asset-libraries/pre-built-extension-ui-components/css-component-libraries.md) — Provides ready-made CSS button components that can be integrated into projects for consistent visual feedback.

### Graphics & Multimedia

- [Hardware-Accelerated Animations](https://awesome-repositories.com/f/graphics-multimedia/hardware-accelerated-animations.md) — Applies GPU-accelerated scaling and translation transforms to ensure high-performance visual movements.
- [Text Flip Animations](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators/text-flip-animations.md) — Renders interactive buttons featuring custom styles and text-flip animations for enhanced feedback. ([source](https://ui-buttons.web.app/zoom-in-and-text-rotate))
- [Button Text Reveal Effects](https://awesome-repositories.com/f/graphics-multimedia/text-reveal-animations/button-text-reveal-effects.md) — Features visual transitions that split and reveal button labels horizontally during interaction. ([source](https://ui-buttons.web.app/split-reveal-horizontal))

### Web Development

- [Visual Element Morphing](https://awesome-repositories.com/f/web-development/dom-morphing/visual-element-morphing.md) — Provides visual morphing effects for button boundaries by animating dimensions and positions of elements.
- [Pure CSS UI Component Libraries](https://awesome-repositories.com/f/web-development/pure-css-ui-component-libraries.md) — Provides a set of interface elements that handle all interactive states and animations natively through CSS.
- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Offers a collection of pre-built, reusable button interface elements for rapid web application development.
- [CSS Animations](https://awesome-repositories.com/f/web-development/web-standards/advanced-css-styling/css-animations.md) — Applies advanced native CSS animations to create polished motion effects for interface buttons.
- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Supplies a collection of functional and interactive button elements featuring radial fills and geometric shapes.