![CSS Button that changes color on click or hover.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/1-basic/preview.webp) |
Basic |
CSS Button that changes color on click or hover. |
![CSS Button slides its two inverted triangles to the middle on click or hover.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/10-inverted-triangles/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/100-line-slide/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/101-don't-cross-the-line/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/11-slicer-and-marquee/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/12-zoom-in-and-text-rotate/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/13-alternate-blocks-and-text-flip/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/14-slide-right/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/15-tilted-diagonal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/16-in-and-out/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/17-bubble-right/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/18-marquee-sign/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/19-shapeshifter/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/2-click-to-fill/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/20-double-shapeshifter/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/21-x-shapeshifter/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/22-fold-middle/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/23-fold-one-side/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/24-arrow-slide-+-text-rotate/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/25-slide-down/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/26-bubble-up-+-text-rotate/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/27-overfold/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/28-focus-in/preview.webp) |
Focus In |
CSS Button that focuses its border in on hover or click. |
![CSS Button that translates its text vertically on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/29-vertical-marquee/preview.webp) |
Vertical Marquee |
CSS Button that translates its text vertically on hover or click. |
![CSS Button that has a pseudo-element background going over it and out on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/3-cover-over/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/30-enlarge/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/31-slanted/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/32-split-reveal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/33-split-reveal-alternate/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/34-split-reveal-horizontal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/35-slide-reveal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/36-diagonal-swipe/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/37-slide-reveal-+-text-down/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/38-pill-shrink/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/39-pill-halo/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/4-glow-button/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/40-rotate-reveal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/41-double-slide-down/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/42-double-slide-right/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/43-3d-rotate-down/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/44-3d-rotate-right/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/45-3d-rotate-left/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/46-3d-rotate-down/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/47-rush-triangle/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/48-3d-float/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/49-3d-button-click/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/5-striped-zebra/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/50-letter-dance/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/51-letter-dance-2/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/52-3d-button-2/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/53-rainbow-fill/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/54-pulse/preview.webp) |
Pulse |
CSS Button that pulsates on hover on hover or click. |
![CSS Button that moves its background back into-place on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/55-offset/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/56-backdrop-blur/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/57-tada/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/58-double-horizontal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/59-jello/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/6-alternate-blocks/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/60-rubberband/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/61-wobble/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/62-head-shake/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/63-heart-beat/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/64-flash/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/65-text-slide/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/66-border-snake/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/67-snakes-alternate/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/68-snakes-meet/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/69-double-vertical/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/7-quadruple-corners/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/70-snakes-center/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/71-material-ripple/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/72-neumorphism-1/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/73-neumorphism-2/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/74-neumorphism-3/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/75-neumorphism-4/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/76-neon/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/77-i-want-attention/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/78-hug/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/79-hug-2/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/8-float-up/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/80-double-diagonal/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/81-progress-fill-right/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/82-progress-fill-up/preview.webp) |
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 vertically on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/83-progress-shrink-vertical/preview.webp) |
Progress Shrink Vertical |
CSS Button that shrinks into a progress-bar vertically on hover or click. |
![CSS Button that shrinks into a progress-bar horizontally on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/84-progress-shrink-vertical/preview.webp) |
Progress Shrink Vertical |
CSS Button that shrinks into a progress-bar horizontally on hover or click. |
![CSS Button that tilts in 3D space to reveal a horizontal progress-bar on hover or click.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/85-3d-progress/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/86-elastic-progress/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/87-letter-dance-3/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/88-circular-charge/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/89-icon-pulse/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/9-slicer/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/90-icon-slide/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/91-double-triangle/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/92-gooey/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/93-seizure-glitch/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/94-handdrawn-1/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/95-handdrawn-2/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/96-icon-zoom/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/97-icon-focus/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/98-progress-fold/preview.webp) |
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.](https://raw.githubusercontent.com/SujinParkdev/core/main/./buttons/99-sandwish/preview.webp) |
Sandwish |
CSS Button that moves up many shadows successively on hover or click. |