Collection of free HTML and CSS flat button code examples

Explore a collection of free HTML and CSS flat button code examples to create sleek, modern, and minimalistic buttons for your website.

Simple Artistic Button

Author:
Mark Mead | March 27, 2020
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Animal Crossing Inspired Hover

Author:
Sarah Fossheim | March 24, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Fancy CSS Button

Author:
Waterproof Web Wizard | January 19, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Button Collection

Author:
alphardex | November 15, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Only CSS: Usually Button

Author:
Yusuke Nakaya | November 13, 2019
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Button Hover Distrotion Effect

Author:
masuwa | November 7, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Button Hover Light Reflection

Author:
masuwa | October 30, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Only CSS Animated Border Button

Author:
PineappleSyrup | July 6, 2019
Made with:
HTML / CSS (SCSS)

About a code

Button with animated border on hover.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Outline Button or Ghost Button: Icon on Hover

Author:
Takane Ichinose | June 17, 2019
Made with:
HTML (Pug) / CSS (SCSS)

About a code

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

Corner Border Button

Author:
Liam | April 20, 2019
Made with:
HTML / CSS (SCSS)

About a code

With hover animation to fill the border gaps.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Flat Buttons Hover Effects

Author:
januaryofmine | March 16, 2019
Made with:
HTML / CSS (SCSS)

About a code

Some beautiful and clean hover effects for flat button.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Flat Buttons

Author:
Silvestar Bistrović | February 4, 2019
Made with:
HTML / CSS (SCSS)

About a code

Flat buttons with smooth hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Stretchy Button

Author:
Katherine Kato | November 27, 2018
Made with:
HTML / CSS (SCSS)

About a code

Pure CSS (SCSS) stretchy button hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Button Hover Animation

Author:
Danil Goncharenko | July 24, 2017
Made with:
HTML / CSS

About a code

Pure CSS button with hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Hover/Focus Effect For Flat Burron

Author:
Ana Tudor | November 7, 2018
Made with:
HTML / CSS (SCSS)

About a code

HTML and CSS flat button with hover/focus effect.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Hover Over Me Button

Author:
Harmandeep Singh | October 3, 2018
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Button Hover Effect

Author:
Comehope | August 19, 2018
Made with:
HTML / CSS

About a code

Pretty and simple button hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

CSS3 Flat Buttons Hover Effects

Author:
Natali Davydova | August 11, 2018
Made with:
HTML / CSS (SCSS)

About a code

5 CSS flat buttons hover effects with FontAwesome5.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Colorful Flat Buttons

Author:
0guzhan | July 25, 2018
Made with:
HTML / CSS (SCSS)

About a code

SCSS mixin for colorful flat buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Hover Effects For Buttons

Author:
MARK | July 10, 2018
Made with:
HTML (Pug) / CSS (SCSS)

About a code

5 HTML and CSS very simple hover effects for buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pure CSS Flipping Button

Pure CSS Flipping Button

Author:
Andrej | January 25, 2018
Made with:
HTML / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Shiny Button

Shiny Button

Author:
Antonio | August 9, 2017
Made with:
HTML / CSS (Sass)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Animated Flat Design Button

Animated Flat Design Button

Author:
Allison Skinner | June 23, 2017
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Animated Rainbow Button

Animated Rainbow Button

Author:
lemmin | June 5, 2017
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Material Design Flat Button

Material Design Flat Button

Author:
Andrew | February 24, 2017
Made with:
HTML / CSS (SCSS)

About a code

Hacky CSS way for flat Material Design shadows for text.

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨