Post thumbnail: 14 CSS Flat Buttons

14 CSS Flat Buttons

Collection of hand-picked free HTML and CSS flat button code examples.

Related Articles

  1. CSS Buttons
  2. CSS Button Hover Effects
  3. CSS 3D Buttons
  4. CSS Submit Buttons
  5. CSS Gradient Buttons
  6. CSS Close Buttons
  7. CSS Download Buttons
  8. CSS Play/Pause Buttons

Demo image: Pure CSS  Flipping Button Pure CSS  Flipping Button - GIF Demo

Author

  • Andrej

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Flipping Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Shiny Button Shiny Button - GIF Demo

Author

  • Antonio

Made with

  • HTML / CSS (Sass)

About the code

Shiny Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Flat Design Button Animated Flat Design Button - GIF Demo

Author

  • Allison Skinner

Made with

  • HTML / CSS

About the code

Animated Flat Design Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Rainbow Button Animated Rainbow Button - GIF Demo

Author

  • lemmin

Made with

  • HTML / CSS

About the code

Animated Rainbow Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Material Design Flat Button Material Design Flat Button - GIF Demo

Author

  • Andrew

Made with

  • HTML / CSS (SCSS)

About the code

Material Design Flat Button

Hacky CSS way for flat Material Design shadows for text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat Buttons Psuedo Striped Shadows Flat Buttons Psuedo Striped Shadows - GIF Demo

Author

  • Daniel Powell

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat Layered Button Flat Layered Button - GIF Demo

Author

  • Dronca Raul

Made with

  • HTML / CSS

About the code

Flat Layered Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS 3D Flip Buttons Pure CSS 3D Flip Buttons - GIF Demo

Author

  • Josh Shor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Pure CSS 3D Flip Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated CSS3 Buttons Animated CSS3 Buttons - GIF Demo

Author

  • Sazzad

Made with

  • HTML / CSS

About the code

Animated CSS3 Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat Buttons Flat Buttons - GIF Demo

Author

  • Benjamin Vilina

Made with

  • HTML / CSS (SCSS)

About the code

Flat Buttons

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Ghost Button Animated Ghost Button - GIF Demo

Author

  • Cameron

Made with

  • HTML / CSS / JavaScript

About the code

Animated Ghost Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Material Flat Button Material Flat Button - GIF Demo

Author

  • Yannick Bisaillon

Made with

  • HTML / CSS (SCSS)

About the code

Material Flat Button

Sweet flat button with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat & Shiny Button Flat & Shiny Button - GIF Demo

Author

  • Nathaniel Watson

Made with

  • HTML / CSS (SCSS)

About the code

Flat & Shiny Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: 12 Fancy Buttons 12 Fancy Buttons - GIF Demo

Author

  • bartekd

Made with

  • HTML / CSS

About the code

12 Fancy Buttons

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top