Welcome to our collection of CSS flat buttons! In this comprehensive collection, we have curated a selection of free HTML and CSS flat button code examples sourced from reputable platforms such as CodePen, GitHub, and other valuable resources.

With our January 2023 update, we are excited to introduce four new additions to our collection, ensuring that you have access to the latest and most stylish flat button designs available. These buttons are specifically designed to provide a clean and modern aesthetic to your website or application, enhancing the overall user experience.

Flat buttons have gained popularity in recent years due to their simplicity and minimalistic design. They offer a sleek and streamlined appearance that seamlessly integrates into any user interface.

Our collection showcases a diverse range of flat button designs, each with its own unique style and visual appeal. From rounded corners to square shapes, from vibrant colors to subtle shades, you'll find a variety of options to suit your project's requirements.

Start exploring our collection now and unlock the potential to create visually stunning and interactive flat buttons that will enhance the overall usability and aesthetics of your website.

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
  9. CSS Button Click Effects
  10. CSS Button Libraries

Author

  • Mark Mead

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Simple Artistic Button

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

Responsive: yes

Dependencies: -

Author

  • Sarah Fossheim

Made with

  • HTML / CSS

About a code

Animal Crossing Inspired Hover

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

Responsive: no

Dependencies: -

Author

  • Waterproof Web Wizard

Made with

  • HTML / CSS (SCSS)

About a code

Fancy CSS Button

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

Responsive: yes

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Button Collection

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

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Usually Button

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

Responsive: no

Dependencies: -

Author

  • masuwa

Made with

  • HTML / CSS

About a code

Button Hover Distrotion Effect

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

Responsive: no

Dependencies: -

Author

  • masuwa

Made with

  • HTML / CSS

About a code

Button Hover Light Reflection

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

Responsive: no

Dependencies: -

Author

  • PineappleSyrup

Made with

  • HTML / CSS (SCSS)

About a code

Only CSS Animated Border Button

Button with animated border on hover.

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

Responsive: no

Dependencies: -

Author

  • Takane Ichinose

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Outline Button or Ghost Button: Icon on Hover

Outline button (or Ghost button): when hovered, the icon hidden at the left side will show.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Liam

Made with

  • HTML / CSS (SCSS)

About a code

Corner Border Button

With hover animation to fill the border gaps.

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

Responsive: yes

Dependencies: -

Author

  • januaryofmine

Made with

  • HTML / CSS (SCSS)

About the code

Flat Buttons Hover Effects

Some beautiful and clean hover effects for flat button.

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

Responsive: no

Dependencies: -

Author

  • Silvestar Bistrović

Made with

  • HTML / CSS (SCSS)

About the code

Flat Buttons

Flat buttons with smooth hover effect.

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

Responsive: no

Dependencies: -

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS)

About the code

Stretchy Button

Pure CSS (SCSS) stretchy button hover effect.

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

Responsive: yes

Dependencies: -

Author

  • Danil Goncharenko

Made with

  • HTML / CSS

About the code

Button Hover Animation

Pure CSS button with hover effect.

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

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About the code

Hover/Focus Effect For Flat Burron

HTML and CSS flat button with hover/focus effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Harmandeep Singh

Made with

  • HTML / CSS

About the code

Hover Over Me Button

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

Responsive: yes

Dependencies: -

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Button Hover Effect

Pretty and simple button hover effect.

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

Responsive: no

Dependencies: -

Author

  • Natali Davydova

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Flat Buttons Hover Effects

5 CSS flat buttons hover effects with FontAwesome5.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • 0guzhan

Made with

  • HTML / CSS (SCSS)

About the code

Colorful Flat Buttons

SCSS mixin for colorful flat buttons.

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

Responsive: yes

Dependencies: -

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hover Effects For Buttons

5 HTML and CSS very simple hover effects for buttons.

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

Responsive: no

Dependencies: -

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: -