git404hub

what is ui-buttons fr?

youneslaaroussi/ui-buttons — explained in plain English

Analysis updated 2026-06-26

3,760CSSAudience · designerComplexity · 1/5Setup · easy

tl;dr

A free collection of 100 CSS-only button designs with hover and click animations, each in its own folder with a live demo link and copy-pastable code for web developers and designers.

vibe map

mindmap
  root((UI Buttons))
    What it is
      100 CSS button designs
      Ready-to-use code
      Free design resource
    Effects
      Hover animations
      Color fill slides
      3D fold effects
    Usage
      Copy paste CSS
      Live demo previews
      Companion website
    Audience
      Web developers
      CSS learners

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Pick a pre-made animated button style from 100 options and paste the CSS directly into your website without writing it from scratch

VIBE 2

Study working CSS animation examples to learn techniques like diagonal sweeps, 3D folds, and marquee text effects

VIBE 3

Use a distinctive button design to make a call-to-action stand out on a landing page or app

what's the stack?

CSSHTML

how it stacks up fr

youneslaaroussi/ui-buttonssakofchit/system.cssapachecn/hands-on-ml-zh
Stars3,7603,7723,783
LanguageCSSCSSCSS
Setup difficultyeasyeasymoderate
Complexity1/52/51/5
Audiencedesignerdeveloperresearcher

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

in plain english

This repository is a collection of 100 CSS button designs, each with its own visual style and interactive effect. The buttons are built using CSS only, covering a wide range of hover and click animations: backgrounds that slide in from one side, text that rotates or flips, borders that morph into shapes, 3D folding effects, diagonal sweeps, bubble fills, and more. The project is aimed at web developers and designers who want ready-made, visually interesting buttons without writing the CSS from scratch. Each button is isolated in its own folder, with a preview image and a link to a live demo. You can browse all 100 designs on the companion website, click through to any one, and copy the code directly. The designs range from simple (a button that changes color on hover) to more complex (a button that morphs into an X shape, or one that cycles content vertically like a marquee). The source code is written in CSS and appears to be compatible with standard web frameworks, with Angular listed among the project topics. Contributions are noted as welcome, and the project is tagged as friendly to first-time contributors. It launched on Product Hunt and the author is maintaining it as a free design resource. This is most useful if you are building a website or app and want to find a distinctive button style quickly, or if you are learning CSS animation techniques and want concrete, working examples to study. The full README is longer than what was shown.

prompts (copy fr)

prompt 1
I want a button that fills with color from left to right on hover. Show me how to implement that CSS animation based on the youneslaaroussi/ui-buttons collection
prompt 2
Help me pick an animated CSS button from ui-buttons that works well as a primary call-to-action on a dark-themed landing page and show me the code
prompt 3
Take the 3D folding button effect from ui-buttons and adapt it to use my brand color #FF5733 while keeping the same hover animation
prompt 4
I am learning CSS animations. Walk me through how the diagonal sweep button effect from ui-buttons works, step by step

Frequently asked questions

what is ui-buttons fr?

A free collection of 100 CSS-only button designs with hover and click animations, each in its own folder with a live demo link and copy-pastable code for web developers and designers.

What language is ui-buttons written in?

Mainly CSS. The stack also includes CSS, HTML.

How hard is ui-buttons to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is ui-buttons for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.