youneslaaroussi/ui-buttons

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

Mindmap

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

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

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

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

USE CASE 2

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

USE CASE 3

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

Tech stack

CSSHTML

Getting it running

Difficulty · easy Time to first run · 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.

Copy-paste prompts

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

Open on GitHub → Explain another repo

← youneslaaroussi on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.