TOP 20 CSS Flat Buttons

FLAT BUTTONS HOVER EFFECTS

Some beautiful and clean hover effects for flat button.

See the Pen Hover Buttons Effect – Date 4 (24 days of animation) by januaryofmine (@januaryofmine) on CodePen.light

FLAT BUTTONS

Flat buttons with smooth hover effect.

See the Pen Flat Buttons With Smooth Hover Effect by Silvestar Bistrović (@CiTA) on CodePen.light

HOVER/FOCUS EFFECT FOR FLAT BURRON

HTML and CSS flat button with hover/focus effect.

See the Pen Hover/ focus effect – #codevember 7/ 2018 by Ana Tudor (@thebabydino) on CodePen.light

CSS3 FLAT BUTTONS HOVER EFFECTS

5 CSS flat buttons hover effects with FontAwesome5.

See the Pen CSS3 buttons hover effects with FontAwesome5 by foxeisen (@foxeisen) on CodePen.light

COLORFUL FLAT BUTTONS

SCSS mixin for colorful flat buttons.

See the Pen 🍄 Colorful Flex Buttons 🍄 by 0guzhan (@0guzhan) on CodePen.light

HOVER EFFECTS FOR BUTTONS

5 HTML and CSS very simple hover effects for buttons.

See the Pen 5 Very Simple Hover Effects by Mark (@markmead) on CodePen.light

PURE CSS FLIPPING BUTTON

This is a flatt button, which has a 3-dimensional flipping effect on hover.

See the Pen Flipping button | pure CSS by Andrej (@Ikonikov) on CodePen.light

SHINY BUTTON

Shiny captivating and flat button for call to action, with only CSS.

See the Pen Shiny button by Antonio (@conlaccento) on CodePen.light

ANIMATED FLAT DESIGN BUTTON

A button that follows the flat design trend but still has some 3D animation on hover.

See the Pen Animated Flat Design Button by Allison Skinner (@adskinner) on CodePen.light

ANIMATED RAINBOW BUTTON

See the Pen Animated Rainbow Button by lemmin (@lemmin) on CodePen.light

MATERIAL DESIGN FLAT BUTTON

Hacky CSS way for flat Material Design shadows for text.

See the Pen Material Design Flat Button by Andrew (@andrewerrico) on CodePen.light

FLAT BUTTONS PSUEDO STRIPED SHADOWS

Flat buttons are all the rage. Stripes are in season. Rather than accomplishing the stripes with a repeating SVG or PNG background image, this CSS-only approach uses a strategically spaced linear gradient at an angle to produce an identical feel. No tessellating knowledge needed. A transformation and intentional z-indexing give a smooth resolve on hover.

See the Pen Flat Buttons’ Psuedo Striped Shadows by Dan Powell (@bloom-dan) on CodePen.light

FLAT LAYERED BUTTON

See the Pen Flat Layered Button by Dronca Raul (@rauldronca) on CodePen.light

PURE CSS 3D FLIP BUTTONS

See the Pen Pure CSS 3D flip buttons by Josh Shor (@jshor) on CodePen.light

ANIMATED CSS3 BUTTONS

See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.light

FLAT BUTTONS

A collection of flat buttons with a little animation. Pure CSS with SCSS.

See the Pen Flat Buttons by Benjamin Vilina (@BenjaminVilina) on CodePen.light

ANIMATED GHOST BUTTON

See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.light

MATERIAL FLAT BUTTON

Sweet flat button with hover effect.

See the Pen Material Flat Button by Yannick Bisaillon (@bisaillonyannick) on CodePen.light

FLAT & SHINY BUTTON

Button with a subtle gloss/shine wipe on hover. No images, just a single HTML element and a CSS pseudo-element.

See the Pen Flat & Shiny Button (hover effect) by Nathaniel Watson (@nw) on CodePen.light

12 FANCY BUTTONS

12 buttons with a unique rollover effect each using only CSS.

See the Pen 12 fancy buttons by bartekd (@bartekd) on CodePen.light