Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eludadev/ui-buttons

100 Modern CSS Buttons. Every style that you can imagine.
https://github.com/eludadev/ui-buttons

List: ui-buttons

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

Last synced: about 1 month ago
JSON representation

100 Modern CSS Buttons. Every style that you can imagine.

Awesome Lists containing this project

README 

        
[![](./assets/banner.png)](https://ui-buttons.web.app)



## 🚀️ We're on Product Hunt!



If you want me to keep making **amazing free resources** for you, I would *really appreaciate* your feedback and support on my **Product Hunt** launch! 🤗️



100 CSS Buttons



## 🤖️ To See Code, Click on One of The Links



| Preview | Link | Description |

| --- | --- | --- |

| [ ![CSS Button that changes color on click or hover.](./buttons/1-basic/preview.webp)](https://ui-buttons.web.app/basic) | [Basic](https://ui-buttons.web.app/basic) | CSS Button that changes color on click or hover. |

| [ ![CSS Button slides its two inverted triangles to the middle on click or hover.](./buttons/10-inverted-triangles/preview.webp)](https://ui-buttons.web.app/inverted-triangles) | [Inverted Triangles](https://ui-buttons.web.app/inverted-triangles) | CSS Button slides its two inverted triangles to the middle on click or hover. |

| [ ![CSS Button that slides its pseudo-element underline on hover or click.](./buttons/100-line-slide/preview.webp)](https://ui-buttons.web.app/line-slide) | [Line Slide](https://ui-buttons.web.app/line-slide) | CSS Button that slides its pseudo-element underline on hover or click. |

| [ ![CSS Button that crosses over itself and expands on hover or click.](./buttons/101-don't-cross-the-line/preview.webp)](https://ui-buttons.web.app/don't-cross-the-line) | [Don't Cross The Line](https://ui-buttons.web.app/don't-cross-the-line) | CSS Button that crosses over itself and expands on hover or click. |

| [ ![CSS Button that slices its background and cycles its content vertically on click or hover.](./buttons/11-slicer-and-marquee/preview.webp)](https://ui-buttons.web.app/slicer-and-marquee) | [Slicer And Marquee](https://ui-buttons.web.app/slicer-and-marquee) | CSS Button that slices its background and cycles its content vertically on click or hover. |

| [ ![CSS Button that slides two inward-pointing pseudo-element triangles to the center on hover or click.](./buttons/12-zoom-in-and-text-rotate/preview.webp)](https://ui-buttons.web.app/zoom-in-and-text-rotate) | [Zoom In And Text Rotate](https://ui-buttons.web.app/zoom-in-and-text-rotate) | CSS Button that slides two inward-pointing pseudo-element triangles to the center on hover or click. |

| [ ![CSS Button that slides its four alternate blocks and flips its text vertically on click or hover.](./buttons/13-alternate-blocks-and-text-flip/preview.webp)](https://ui-buttons.web.app/alternate-blocks-and-text-flip) | [Alternate Blocks And Text Flip](https://ui-buttons.web.app/alternate-blocks-and-text-flip) | CSS Button that slides its four alternate blocks and flips its text vertically on click or hover. |

| [ ![CSS Button with background that slides right on click or hover.](./buttons/14-slide-right/preview.webp)](https://ui-buttons.web.app/slide-right) | [Slide Right](https://ui-buttons.web.app/slide-right) | CSS Button with background that slides right on click or hover. |

| [ ![CSS Button that slides its increasingly tilted diagonal to the right on click or hover.](./buttons/15-tilted-diagonal/preview.webp)](https://ui-buttons.web.app/tilted-diagonal) | [Tilted diagonal](https://ui-buttons.web.app/tilted-diagonal) | CSS Button that slides its increasingly tilted diagonal to the right on click or hover. |

| [ ![CSS Button that slides its background to the right on click or hover and more to the right again on click or hover.](./buttons/16-in-and-out/preview.webp)](https://ui-buttons.web.app/in-and-out) | [In And Out](https://ui-buttons.web.app/in-and-out) | CSS Button that slides its background to the right on click or hover and more to the right again on click or hover. |

| [ ![CSS Button that slides its circular background to the right on click or hover.](./buttons/17-bubble-right/preview.webp)](https://ui-buttons.web.app/bubble-right) | [Bubble Right](https://ui-buttons.web.app/bubble-right) | CSS Button that slides its circular background to the right on click or hover. |

| [ ![CSS Button that moves copies of its text horizontally and at an angle on click or hover.](./buttons/18-marquee-sign/preview.webp)](https://ui-buttons.web.app/marquee-sign) | [Marquee Sign](https://ui-buttons.web.app/marquee-sign) | CSS Button that moves copies of its text horizontally and at an angle on click or hover. |

| [ ![CSS Button that morphs one side of its border into a triangle pseudo-element on click or hover.](./buttons/19-shapeshifter/preview.webp)](https://ui-buttons.web.app/shapeshifter) | [ShapeShifter](https://ui-buttons.web.app/shapeshifter) | CSS Button that morphs one side of its border into a triangle pseudo-element on click or hover. |

| [ ![CSS Button with background that fills it up vertically on click.](./buttons/2-click-to-fill/preview.webp)](https://ui-buttons.web.app/click-to-fill) | [Click To Fill](https://ui-buttons.web.app/click-to-fill) | CSS Button with background that fills it up vertically on click. |

| [ ![CSS Button that morphs both sides into a triangle pseudo-element on click or hover.](./buttons/20-double-shapeshifter/preview.webp)](https://ui-buttons.web.app/double-shapeshifter) | [Double ShapeShifter](https://ui-buttons.web.app/double-shapeshifter) | CSS Button that morphs both sides into a triangle pseudo-element on click or hover. |

| [ ![CSS Button that morphs into an X using pseudo-elements on click or hover.](./buttons/21-x-shapeshifter/preview.webp)](https://ui-buttons.web.app/x-shapeshifter) | [X ShapeShifter](https://ui-buttons.web.app/x-shapeshifter) | CSS Button that morphs into an X using pseudo-elements on click or hover. |

| [ ![CSS Button that folds from the middle using CSS 3D Transforms on hover or click.](./buttons/22-fold-middle/preview.webp)](https://ui-buttons.web.app/fold-middle) | [Fold Middle](https://ui-buttons.web.app/fold-middle) | CSS Button that folds from the middle using CSS 3D Transforms on hover or click. |

| [ ![CSS Button that folds from one side using CSS 3D Transforms on hover or click.](./buttons/23-fold-one-side/preview.webp)](https://ui-buttons.web.app/fold-one-side) | [Fold One Side](https://ui-buttons.web.app/fold-one-side) | CSS Button that folds from one side using CSS 3D Transforms on hover or click. |

| [ ![CSS Button that slides its triangular background from the left to the right and rotates its text on hover or click.](./buttons/24-arrow-slide-+-text-rotate/preview.webp)](https://ui-buttons.web.app/arrow-slide-+-text-rotate) | [Arrow Slide + Text Rotate](https://ui-buttons.web.app/arrow-slide-+-text-rotate) | CSS Button that slides its triangular background from the left to the right and rotates its text on hover or click. |

| [ ![CSS Button with backgrounds that slides down on click or hover.](./buttons/25-slide-down/preview.webp)](https://ui-buttons.web.app/slide-down) | [Slide Down](https://ui-buttons.web.app/slide-down) | CSS Button with backgrounds that slides down on click or hover. |

| [ ![CSS Button that slides its bubbly radial background to the bottom and rotates its text on hover or click.](./buttons/26-bubble-up-+-text-rotate/preview.webp)](https://ui-buttons.web.app/bubble-up-+-text-rotate) | [Bubble Up + Text Rotate](https://ui-buttons.web.app/bubble-up-+-text-rotate) | CSS Button that slides its bubbly radial background to the bottom and rotates its text on hover or click. |

| [ ![CSS Button that moves one corner from the bottom right to the top left to reveal its background on hover or click.](./buttons/27-overfold/preview.webp)](https://ui-buttons.web.app/overfold) | [OverFold](https://ui-buttons.web.app/overfold) | CSS Button that moves one corner from the bottom right to the top left to reveal its background on hover or click. |

| [ ![CSS Button that focuses its border in on hover or click.](./buttons/28-focus-in/preview.webp)](https://ui-buttons.web.app/focus-in) | [Focus In](https://ui-buttons.web.app/focus-in) | CSS Button that focuses its border in on hover or click. |

| [ ![CSS Button that has a pseudo-element background going over it and out on hover or click.](./buttons/3-cover-over/preview.webp)](https://ui-buttons.web.app/cover-over) | [Cover Over](https://ui-buttons.web.app/cover-over) | CSS Button that has a pseudo-element background going over it and out on hover or click. |

| [ ![CSS Button that fills up its background radially from the center and scales up on hover or click.](./buttons/30-enlarge/preview.webp)](https://ui-buttons.web.app/enlarge) | [Enlarge](https://ui-buttons.web.app/enlarge) | CSS Button that fills up its background radially from the center and scales up on hover or click. |

| [ ![CSS Button that tilts its background from the top left corner on hover or click.](./buttons/31-slanted/preview.webp)](https://ui-buttons.web.app/slanted) | [Slanted](https://ui-buttons.web.app/slanted) | CSS Button that tilts its background from the top left corner on hover or click. |

| [ ![CSS Button that reveals new text by splitting it horizontally from the center on hover or click.](./buttons/32-split-reveal/preview.webp)](https://ui-buttons.web.app/split-reveal) | [Split Reveal](https://ui-buttons.web.app/split-reveal) | CSS Button that reveals new text by splitting it horizontally from the center on hover or click. |

| [ ![CSS Button that reveals new text by splitting it alternately from the center on hover or click.](./buttons/33-split-reveal-alternate/preview.webp)](https://ui-buttons.web.app/split-reveal-alternate) | [Split Reveal Alternate](https://ui-buttons.web.app/split-reveal-alternate) | CSS Button that reveals new text by splitting it alternately from the center on hover or click. |

| [ ![CSS Button that reveals new text by splitting it horizontally from the center on hover or click.](./buttons/34-split-reveal-horizontal/preview.webp)](https://ui-buttons.web.app/split-reveal-horizontal) | [Split Reveal Horizontal](https://ui-buttons.web.app/split-reveal-horizontal) | CSS Button that reveals new text by splitting it horizontally from the center on hover or click. |

| [ ![CSS Button that reveals new text by sliding it to the right on hover or click.](./buttons/35-slide-reveal/preview.webp)](https://ui-buttons.web.app/slide-reveal) | [Slide Reveal](https://ui-buttons.web.app/slide-reveal) | CSS Button that reveals new text by sliding it to the right on hover or click. |

| [ ![CSS Button that slides its diagonal background to the right on click or hover.](./buttons/36-diagonal-swipe/preview.webp)](https://ui-buttons.web.app/diagonal-swipe) | [Diagonal Swipe](https://ui-buttons.web.app/diagonal-swipe) | CSS Button that slides its diagonal background to the right on click or hover. |

| [ ![CSS Button that reveals new text by sliding it to the right and sliding the old text down on hover or click.](./buttons/37-slide-reveal-+-text-down/preview.webp)](https://ui-buttons.web.app/slide-reveal-+-text-down) | [Slide Reveal + Text Down](https://ui-buttons.web.app/slide-reveal-+-text-down) | CSS Button that reveals new text by sliding it to the right and sliding the old text down on hover or click. |

| [ ![CSS Button that scales its pill-like background down on hover or click.](./buttons/38-pill-shrink/preview.webp)](https://ui-buttons.web.app/pill-shrink) | [Pill Shrink](https://ui-buttons.web.app/pill-shrink) | CSS Button that scales its pill-like background down on hover or click. |

| [ ![CSS Button that focuses in its pill-like border on hover or click.](./buttons/39-pill-halo/preview.webp)](https://ui-buttons.web.app/pill-halo) | [Pill Halo](https://ui-buttons.web.app/pill-halo) | CSS Button that focuses in its pill-like border on hover or click. |

| [ ![CSS Button that has a moving and glowing border on hover or click.](./buttons/4-glow-button/preview.webp)](https://ui-buttons.web.app/glow-button) | [Glow Button](https://ui-buttons.web.app/glow-button) | CSS Button that has a moving and glowing border on hover or click. |

| [ ![CSS Button that reveals new text by rotating it in from the bottom left on hover or click.](./buttons/40-rotate-reveal/preview.webp)](https://ui-buttons.web.app/rotate-reveal) | [Rotate Reveal](https://ui-buttons.web.app/rotate-reveal) | CSS Button that reveals new text by rotating it in from the bottom left on hover or click. |

| [ ![CSS Button that slides its two backgrounds successively to the bottom on hover or click.](./buttons/41-double-slide-down/preview.webp)](https://ui-buttons.web.app/double-slide-down) | [Double Slide Down](https://ui-buttons.web.app/double-slide-down) | CSS Button that slides its two backgrounds successively to the bottom on hover or click. |

| [ ![CSS Button that slides its two backgrounds successively to the right on hover or click.](./buttons/42-double-slide-right/preview.webp)](https://ui-buttons.web.app/double-slide-right) | [Double Slide Right](https://ui-buttons.web.app/double-slide-right) | CSS Button that slides its two backgrounds successively to the right on hover or click. |

| [ ![CSS Button that rotates down using 3D Transforms on hover or click.](./buttons/46-3d-rotate-down/preview.webp)](https://ui-buttons.web.app/3d-rotate-down) | [3D Rotate Down](https://ui-buttons.web.app/3d-rotate-down) | CSS Button that rotates down using 3D Transforms on hover or click. |

| [ ![CSS Button that rotates right using 3D Transforms on hover or click.](./buttons/44-3d-rotate-right/preview.webp)](https://ui-buttons.web.app/3d-rotate-right) | [3D Rotate Right](https://ui-buttons.web.app/3d-rotate-right) | CSS Button that rotates right using 3D Transforms on hover or click. |

| [ ![CSS Button that rotates left using 3D Transforms on hover or click.](./buttons/45-3d-rotate-left/preview.webp)](https://ui-buttons.web.app/3d-rotate-left) | [3D Rotate Left](https://ui-buttons.web.app/3d-rotate-left) | CSS Button that rotates left using 3D Transforms on hover or click. |

| [ ![CSS Button that rotates up using 3D Transforms on hover or click.](./buttons/46-3d-rotate-down/preview.webp)](https://ui-buttons.web.app/3d-rotate-down) | [3D Rotate Down](https://ui-buttons.web.app/3d-rotate-down) | CSS Button that rotates up using 3D Transforms on hover or click. |

| [ ![CSS Button that slides its triangular background to the right on click or hover.](./buttons/47-rush-triangle/preview.webp)](https://ui-buttons.web.app/rush-triangle) | [Rush Triangle](https://ui-buttons.web.app/rush-triangle) | CSS Button that slides its triangular background to the right on click or hover. |

| [ ![CSS Button that has a large box shadow and that tilts down using 3D Transforms on hover or click.](./buttons/48-3d-float/preview.webp)](https://ui-buttons.web.app/3d-float) | [3D Float](https://ui-buttons.web.app/3d-float) | CSS Button that has a large box shadow and that tilts down using 3D Transforms on hover or click. |

| [ ![CSS Button that pushes itself down in 3D space on hover or click.](./buttons/49-3d-button-click/preview.webp)](https://ui-buttons.web.app/3d-button-click) | [3D Button Click](https://ui-buttons.web.app/3d-button-click) | CSS Button that pushes itself down in 3D space on hover or click. |

| [ ![CSS Button with striped background that scrolls on click or hover.](./buttons/5-striped-zebra/preview.webp)](https://ui-buttons.web.app/striped-zebra) | [Striped Zebra](https://ui-buttons.web.app/striped-zebra) | CSS Button with striped background that scrolls on click or hover. |

| [ ![CSS Button that slides its characters down successively one after the other on hover or click.](./buttons/50-letter-dance/preview.webp)](https://ui-buttons.web.app/letter-dance) | [Letter Dance](https://ui-buttons.web.app/letter-dance) | CSS Button that slides its characters down successively one after the other on hover or click. |

| [ ![CSS Button that slides its characters up and down alternately on hover or click.](./buttons/51-letter-dance-2/preview.webp)](https://ui-buttons.web.app/letter-dance-2) | [Letter Dance 2](https://ui-buttons.web.app/letter-dance-2) | CSS Button that slides its characters up and down alternately on hover or click. |

| [ ![CSS Button that simulates 3D using html elements and that pushes down on hover or click.](./buttons/52-3d-button-2/preview.webp)](https://ui-buttons.web.app/3d-button-2) | [3D Button 2](https://ui-buttons.web.app/3d-button-2) | CSS Button that simulates 3D using html elements and that pushes down on hover or click. |

| [ ![CSS Button that reveals its fun rainbow gradient background sitting inside of its rainbow gradient image border on hover or click.](./buttons/53-rainbow-fill/preview.webp)](https://ui-buttons.web.app/rainbow-fill) | [Rainbow Fill](https://ui-buttons.web.app/rainbow-fill) | CSS Button that reveals its fun rainbow gradient background sitting inside of its rainbow gradient image border on hover or click. |

| [ ![CSS Button that pulsates on hover on hover or click.](./buttons/54-pulse/preview.webp)](https://ui-buttons.web.app/pulse) | [Pulse](https://ui-buttons.web.app/pulse) | CSS Button that pulsates on hover on hover or click. |

| [ ![CSS Button that moves its background back into-place on hover or click.](./buttons/55-offset/preview.webp)](https://ui-buttons.web.app/offset) | [Offset](https://ui-buttons.web.app/offset) | CSS Button that moves its background back into-place on hover or click. |

| [ ![CSS Button that overlays a blurry layer on its background on hover or click.](./buttons/56-backdrop-blur/preview.webp)](https://ui-buttons.web.app/backdrop-blur) | [Backdrop Blur](https://ui-buttons.web.app/backdrop-blur) | CSS Button that overlays a blurry layer on its background on hover or click. |

| [ ![CSS Button that plays the TADA animation from animate.css on hover or click.](./buttons/57-tada/preview.webp)](https://ui-buttons.web.app/tada) | [Tada](https://ui-buttons.web.app/tada) | CSS Button that plays the TADA animation from animate.css on hover or click. |

| [ ![CSS Button that slides its two backgrounds horizontally to the middle on click or hover.](./buttons/58-double-horizontal/preview.webp)](https://ui-buttons.web.app/double-horizontal) | [Double Horizontal](https://ui-buttons.web.app/double-horizontal) | CSS Button that slides its two backgrounds horizontally to the middle on click or hover. |

| [ ![CSS Button that plays the jello animation from animate.css on hover or click.](./buttons/59-jello/preview.webp)](https://ui-buttons.web.app/jello) | [Jello](https://ui-buttons.web.app/jello) | CSS Button that plays the jello animation from animate.css on hover or click. |

| [ ![CSS Button with four blocks on alternate sides that move to the center on click or hover.](./buttons/6-alternate-blocks/preview.webp)](https://ui-buttons.web.app/alternate-blocks) | [Alternate Blocks](https://ui-buttons.web.app/alternate-blocks) | CSS Button with four blocks on alternate sides that move to the center on click or hover. |

| [ ![CSS Button that plays the rubberband animation from animate.css on hover or click.](./buttons/60-rubberband/preview.webp)](https://ui-buttons.web.app/rubberband) | [Rubberband](https://ui-buttons.web.app/rubberband) | CSS Button that plays the rubberband animation from animate.css on hover or click. |

| [ ![CSS Button that plays the wobble animation from animate.css on hover or click.](./buttons/61-wobble/preview.webp)](https://ui-buttons.web.app/wobble) | [Wobble](https://ui-buttons.web.app/wobble) | CSS Button that plays the wobble animation from animate.css on hover or click. |

| [ ![CSS Button that plays the head-shake animation from animate.css on hover or click.](./buttons/62-head-shake/preview.webp)](https://ui-buttons.web.app/head-shake) | [Head Shake](https://ui-buttons.web.app/head-shake) | CSS Button that plays the head-shake animation from animate.css on hover or click. |

| [ ![CSS Button that plays the heart-beat animation from animate.css on hover or click.](./buttons/63-heart-beat/preview.webp)](https://ui-buttons.web.app/heart-beat) | [Heart Beat](https://ui-buttons.web.app/heart-beat) | CSS Button that plays the heart-beat animation from animate.css on hover or click. |

| [ ![CSS Button that plays the flash animation from animate.css on hover or click.](./buttons/64-flash/preview.webp)](https://ui-buttons.web.app/flash) | [Flash](https://ui-buttons.web.app/flash) | CSS Button that plays the flash animation from animate.css on hover or click. |

| [ ![CSS Button that slides a copy of its text vertically with another color on hover or click.](./buttons/65-text-slide/preview.webp)](https://ui-buttons.web.app/text-slide) | [Text Slide](https://ui-buttons.web.app/text-slide) | CSS Button that slides a copy of its text vertically with another color on hover or click. |

| [ ![CSS Button that has borders that fill-up one after another on hover or click.](./buttons/66-border-snake/preview.webp)](https://ui-buttons.web.app/border-snake) | [Border Snake](https://ui-buttons.web.app/border-snake) | CSS Button that has borders that fill-up one after another on hover or click. |

| [ ![CSS Button that has borders filling up from the parallel sides on hover or click.](./buttons/67-snakes-alternate/preview.webp)](https://ui-buttons.web.app/snakes-alternate) | [Snakes Alternate](https://ui-buttons.web.app/snakes-alternate) | CSS Button that has borders filling up from the parallel sides on hover or click. |

| [ ![CSS Button that has borders filling up to meet at 2 points on hover or click.](./buttons/68-snakes-meet/preview.webp)](https://ui-buttons.web.app/snakes-meet) | [Snakes Meet](https://ui-buttons.web.app/snakes-meet) | CSS Button that has borders filling up to meet at 2 points on hover or click. |

| [ ![CSS Button with two backgrounds that slide vertically to the center on click or hover.](./buttons/69-double-vertical/preview.webp)](https://ui-buttons.web.app/double-vertical) | [Double Vertical](https://ui-buttons.web.app/double-vertical) | CSS Button with two backgrounds that slide vertically to the center on click or hover. |

| [ ![CSS Button with 4 corners that all converge to the middle on click or hover.](./buttons/7-quadruple-corners/preview.webp)](https://ui-buttons.web.app/quadruple-corners) | [Quadruple Corners](https://ui-buttons.web.app/quadruple-corners) | CSS Button with 4 corners that all converge to the middle on click or hover. |

| [ ![CSS Button that has borders filling up from the center on hover or click.](./buttons/70-snakes-center/preview.webp)](https://ui-buttons.web.app/snakes-center) | [Snakes Center](https://ui-buttons.web.app/snakes-center) | CSS Button that has borders filling up from the center on hover or click. |

| [ ![CSS Button that fills up its background radially from the center then fades out on hover or click.](./buttons/71-material-ripple/preview.webp)](https://ui-buttons.web.app/material-ripple) | [Material Ripple](https://ui-buttons.web.app/material-ripple) | CSS Button that fills up its background radially from the center then fades out on hover or click. |

| [ ![CSS Button that has a fluffy shadow that moves to the inside on hover or click.](./buttons/72-neumorphism-1/preview.webp)](https://ui-buttons.web.app/neumorphism-1) | [Neumorphism 1](https://ui-buttons.web.app/neumorphism-1) | CSS Button that has a fluffy shadow that moves to the inside on hover or click. |

| [ ![CSS Button that has a fluffy shadow and text with a 3D effect using text shadows and that moves to the inside on hover or click.](./buttons/73-neumorphism-2/preview.webp)](https://ui-buttons.web.app/neumorphism-2) | [Neumorphism 2](https://ui-buttons.web.app/neumorphism-2) | CSS Button that has a fluffy shadow and text with a 3D effect using text shadows and that moves to the inside on hover or click. |

| [ ![CSS Button that has a fluffy shadow that smoothly moves to the inside on hover or click.](./buttons/74-neumorphism-3/preview.webp)](https://ui-buttons.web.app/neumorphism-3) | [Neumorphism 3](https://ui-buttons.web.app/neumorphism-3) | CSS Button that has a fluffy shadow that smoothly moves to the inside on hover or click. |

| [ ![CSS Button that moves down on hover or click.](./buttons/75-neumorphism-4/preview.webp)](https://ui-buttons.web.app/neumorphism-4) | [Neumorphism 4](https://ui-buttons.web.app/neumorphism-4) | CSS Button that moves down on hover or click. |

| [ ![CSS Button that has borders filling up slowly then revealing a large neon shadow on hover or click.](./buttons/76-neon/preview.webp)](https://ui-buttons.web.app/neon) | [Neon](https://ui-buttons.web.app/neon) | CSS Button that has borders filling up slowly then revealing a large neon shadow on hover or click. |

| [ ![CSS Button that keeps pulsing on hover or click.](./buttons/77-i-want-attention/preview.webp)](https://ui-buttons.web.app/i-want-attention) | [I Want Attention](https://ui-buttons.web.app/i-want-attention) | CSS Button that keeps pulsing on hover or click. |

| [ ![CSS Button that moves its background from the outside to the inside on hover or click.](./buttons/78-hug/preview.webp)](https://ui-buttons.web.app/hug) | [Hug](https://ui-buttons.web.app/hug) | CSS Button that moves its background from the outside to the inside on hover or click. |

| [ ![CSS Button that moves its background closer from the outside to the inside on hover or click.](./buttons/79-hug-2/preview.webp)](https://ui-buttons.web.app/hug-2) | [Hug 2](https://ui-buttons.web.app/hug-2) | CSS Button that moves its background closer from the outside to the inside on hover or click. |

| [ ![CSS Button that floats up with a box shadow below it on click or hover.](./buttons/8-float-up/preview.webp)](https://ui-buttons.web.app/float-up) | [Float Up](https://ui-buttons.web.app/float-up) | CSS Button that floats up with a box shadow below it on click or hover. |

| [ ![CSS Button that slides its two diagonal backgrounds horizontally to the center on click or hover.](./buttons/80-double-diagonal/preview.webp)](https://ui-buttons.web.app/double-diagonal) | [Double Diagonal](https://ui-buttons.web.app/double-diagonal) | CSS Button that slides its two diagonal backgrounds horizontally to the center on click or hover. |

| [ ![CSS Button that has a background that slowly fills up with a progress animation on hover or click.](./buttons/81-progress-fill-right/preview.webp)](https://ui-buttons.web.app/progress-fill-right) | [Progress Fill Right](https://ui-buttons.web.app/progress-fill-right) | CSS Button that has a background that slowly fills up with a progress animation on hover or click. |

| [ ![CSS Button that has a background that slowly fills up vertically on hover or click.](./buttons/82-progress-fill-up/preview.webp)](https://ui-buttons.web.app/progress-fill-up) | [Progress Fill Up](https://ui-buttons.web.app/progress-fill-up) | CSS Button that has a background that slowly fills up vertically on hover or click. |

| [ ![CSS Button that shrinks into a progress-bar horizontally on hover or click.](./buttons/84-progress-shrink-vertical/preview.webp)](https://ui-buttons.web.app/progress-shrink-vertical) | [Progress Shrink Vertical](https://ui-buttons.web.app/progress-shrink-vertical) | CSS Button that shrinks into a progress-bar vertically on hover or click. |

| [ ![CSS Button that tilts in 3D space to reveal a horizontal progress-bar on hover or click.](./buttons/85-3d-progress/preview.webp)](https://ui-buttons.web.app/3d-progress) | [3D Progress](https://ui-buttons.web.app/3d-progress) | CSS Button that tilts in 3D space to reveal a horizontal progress-bar on hover or click. |

| [ ![CSS Button that shrinks into a horizontal progress-bar in a smooth and elastic animation on hover or click.](./buttons/86-elastic-progress/preview.webp)](https://ui-buttons.web.app/elastic-progress) | [Elastic Progress](https://ui-buttons.web.app/elastic-progress) | CSS Button that shrinks into a horizontal progress-bar in a smooth and elastic animation on hover or click. |

| [ ![CSS Button that double-fills its background and plays an elastic animation with its characters on hover or click.](./buttons/87-letter-dance-3/preview.webp)](https://ui-buttons.web.app/letter-dance-3) | [Letter Dance 3](https://ui-buttons.web.app/letter-dance-3) | CSS Button that double-fills its background and plays an elastic animation with its characters on hover or click. |

| [ ![CSS Button that has a circular border that is clipped and fills up then fills up the background on hover or click.](./buttons/88-circular-charge/preview.webp)](https://ui-buttons.web.app/circular-charge) | [Circular Charge](https://ui-buttons.web.app/circular-charge) | CSS Button that has a circular border that is clipped and fills up then fills up the background on hover or click. |

| [ ![CSS Button that scales its background like a pulse on hover or click.](./buttons/89-icon-pulse/preview.webp)](https://ui-buttons.web.app/icon-pulse) | [Icon Pulse](https://ui-buttons.web.app/icon-pulse) | CSS Button that scales its background like a pulse on hover or click. |

| [ ![CSS Button that slices its background in half on click or hover.](./buttons/9-slicer/preview.webp)](https://ui-buttons.web.app/slicer) | [Slicer](https://ui-buttons.web.app/slicer) | CSS Button that slices its background in half on click or hover. |

| [ ![CSS Button that slides vertically inside its borders on hover or click.](./buttons/90-icon-slide/preview.webp)](https://ui-buttons.web.app/icon-slide) | [Icon Slide](https://ui-buttons.web.app/icon-slide) | CSS Button that slides vertically inside its borders on hover or click. |

| [ ![CSS Button that slides its two triangular backgrounds horizontally to the center on click or hover.](./buttons/91-double-triangle/preview.webp)](https://ui-buttons.web.app/double-triangle) | [Double Triangle](https://ui-buttons.web.app/double-triangle) | CSS Button that slides its two triangular backgrounds horizontally to the center on click or hover. |

| [ ![CSS Button that moves two circles closer to each other that have a gooey and slimy effect on hover or click.](./buttons/92-gooey/preview.webp)](https://ui-buttons.web.app/gooey) | [Gooey](https://ui-buttons.web.app/gooey) | CSS Button that moves two circles closer to each other that have a gooey and slimy effect on hover or click. |

| [ ![CSS Button that plays an RGB split animation on hover or click.](./buttons/93-seizure-glitch/preview.webp)](https://ui-buttons.web.app/seizure-glitch) | [Seizure Glitch](https://ui-buttons.web.app/seizure-glitch) | CSS Button that plays an RGB split animation on hover or click. |

| [ ![CSS Button that has borders mimicking hand-drawn edges on hover or click.](./buttons/94-handdrawn-1/preview.webp)](https://ui-buttons.web.app/handdrawn-1) | [HandDrawn 1](https://ui-buttons.web.app/handdrawn-1) | CSS Button that has borders mimicking hand-drawn edges on hover or click. |

| [ ![CSS Button that has borders mimicking hand-drawn edges and floats up on hover or click.](./buttons/95-handdrawn-2/preview.webp)](https://ui-buttons.web.app/handdrawn-2) | [HandDrawn 2](https://ui-buttons.web.app/handdrawn-2) | CSS Button that has borders mimicking hand-drawn edges and floats up on hover or click. |

| [ ![CSS Button that scales down inside its borders on hover or click.](./buttons/96-icon-zoom/preview.webp)](https://ui-buttons.web.app/icon-zoom) | [Icon Zoom](https://ui-buttons.web.app/icon-zoom) | CSS Button that scales down inside its borders on hover or click. |

| [ ![CSS Button that has a border scaling in on it on hover or click.](./buttons/97-icon-focus/preview.webp)](https://ui-buttons.web.app/icon-focus) | [Icon Focus](https://ui-buttons.web.app/icon-focus) | CSS Button that has a border scaling in on it on hover or click. |

| [ ![CSS Button that paper-folds one side to reveal a progress-bar on hover or click.](./buttons/98-progress-fold/preview.webp)](https://ui-buttons.web.app/progress-fold) | [Progress Fold](https://ui-buttons.web.app/progress-fold) | CSS Button that paper-folds one side to reveal a progress-bar on hover or click. |

| [ ![CSS Button that moves up many shadows successively on hover or click.](./buttons/99-sandwish/preview.webp)](https://ui-buttons.web.app/sandwish) | [Sandwish](https://ui-buttons.web.app/sandwish) | CSS Button that moves up many shadows successively on hover or click. |