35 CSS Flat Buttons

About a code

Simple Artistic Button

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

Responsive: yes

Dependencies: -

About a code

Animal Crossing Inspired Hover

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

Responsive: no

Dependencies: -

About a code

Fancy CSS Button

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

Responsive: yes

Dependencies: -

About a code

Button Collection

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

Responsive: no

Dependencies: -

About a code

Only CSS: Usually Button

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

Responsive: no

Dependencies: -

About a code

Button Hover Distrotion Effect

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

Responsive: no

Dependencies: -

About a code

Button Hover Light Reflection

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

Responsive: no

Dependencies: -

About a code

Only CSS Animated Border Button

Button with animated border on hover.

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

Responsive: no

Dependencies: -

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

About a code

Corner Border Button

With hover animation to fill the border gaps.

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

Responsive: yes

Dependencies: -

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

About the code

Flat Buttons

Flat buttons with smooth hover effect.

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

Responsive: no

Dependencies: -

About the code

Stretchy Button

Pure CSS (SCSS) stretchy button hover effect.

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

Responsive: yes

Dependencies: -

About the code

Button Hover Animation

Pure CSS button with hover effect.

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

Responsive: no

Dependencies: -

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

About the code

Hover Over Me Button

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

Responsive: yes

Dependencies: -

About the code

Button Hover Effect

Pretty and simple button hover effect.

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

Responsive: no

Dependencies: -

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

About the code

Colorful Flat Buttons

SCSS mixin for colorful flat buttons.

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

Responsive: yes

Dependencies: -

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

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

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

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

About the code

Animated Rainbow Button

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

Dependencies: -

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

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

About a code

CSS Buttons

Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes.

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

Responsive: yes

Dependencies: -

About the code

Flat Layered Button

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

Dependencies: -

About the code

Pure CSS 3D Flip Buttons

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

Dependencies: -

About the code

Animated CSS3 Buttons

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

Dependencies: -

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

About the code

Animated Ghost Button

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

Dependencies: -

About the code

Material Flat Button

Sweet flat button with hover effect.

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

Dependencies: -

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

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