Material Design Flat Button

Hacky CSS way for flat Material Design shadows for text.

Made with: HTML,CSS (SCSS)

View 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.

Made with: HTML,CSS

View Code

Css Buttons

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

Made with: HTML (Pug),CSS (SCSS)

View Code

Flat Layered Button

Made with: HTML,CSS

View Code

Pure Css 3D Flip Buttons

Made with: HTML (Pug),CSS (SCSS)

View Code

Animated Css3 Buttons

Made with: HTML,CSS

View Code

Flat Buttons

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

Made with: HTML,CSS (SCSS)

View Code

Animated Ghost Button

Made with: HTML,CSS,JavaScript

View Code

Material Flat Button

Sweet flat button with hover effect.

Made with: HTML,CSS (SCSS)

View 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.

Made with: HTML,CSS (SCSS)

View Code

12 Fancy Buttons

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

Made with: HTML,CSS

View Code