Flat Buttons

43 snippets

Browse Flat Buttons examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-flat-buttons

Snippets(43)

12 Fancy Buttons
A 12 fancy buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
interactive hover effects, multiple styles
Responsive
Yes
Animal Crossing Inspired Hover
A animal crossing inspired hover built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
Animated CSS3 Buttons
A animated css3 buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
beginner
Responsive
Yes
Animated Flat Design Button
A animated flat design button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
easy
Responsive
Yes
Animated Ghost Button
A animated ghost button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Beginner
Features
Hover animation, CSS Variables
Responsive
Yes
Animated Rainbow Button
A animated rainbow button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Arrow Buttons
A arrow buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Button Collection
A button collection built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Button Hover
A button hover built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Button Hover Animation
A button hover animation built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
advanced
Features
border-animation, icon-morphing, hover-effect
Responsive
Yes
Button Hover Distrotion Effect
A button hover distrotion effect built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
intermediate
Features
Hover Animation, Distortion Effect
Responsive
Yes
Button Hover Effect
A button hover effect built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Button Hover Light Reflection
A button hover light reflection built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3
Difficulty
beginner
Features
hover-effect, pseudo-elements, animation
Responsive
Yes
Buttons
A buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
CSS Buttons
A css buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
CSS3 Flat Buttons Hover Effects
A css3 flat buttons hover effects built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
beginner
Responsive
Yes
Colorful Flat Buttons
A colorful flat buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Corner Border Button
A corner border button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
SCSS, HTML
Features
hover-effects, pseudo-elements
Fancy CSS Button
A fancy css button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Flat & Shiny Button
A flat & shiny button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Flat Buttons
A flat buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
hover effects, minimalist design, sliding background
Responsive
Yes
Flat Buttons
A flat buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Flat Buttons Hover Effects
A flat buttons hover effects built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, SCSS
Difficulty
Beginner
Features
Hover Animations, Keyframe Animations, Pseudo-elements
Responsive
Yes
Flat Buttons Psuedo Striped Shadows
A flat buttons psuedo striped shadows built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
html, css
Difficulty
intermediate
Responsive
Yes
Flat Layered Button
A flat layered button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Hover Effects For Buttons
A hover effects for buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
CSS transitions, Hover states
Responsive
Yes
Hover Over Me Button
A hover over me button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Keyframe Animations, Pseudo Elements, Hover Effects
Responsive
Yes
Hover/Focus Effect For Flat Burron
A hover/focus effect for flat burron built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
Hover Effect, Focus State, CSS Animations
Responsive
Yes
Material Design Flat Button
A material design flat button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
easy
Responsive
Yes
Material Flat Button
A material flat button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Only CSS Animated Border Button
A only css animated border button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, SCSS
Difficulty
Intermediate
Features
CSS-only animation, Hover effect, Border tracing
Responsive
Yes
Only CSS: Usually Button
A only css: usually button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Outline Button or Ghost Button: Icon on Hover
A outline button or ghost button: icon on hover built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
hover animation, icon transition, scalable sizes
Responsive
Yes
Pure CSS 3D Flip Buttons
A pure css 3d flip buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3
Difficulty
Beginner
Features
3D Transforms, Hover Animation, No-JS
Responsive
Yes
Shiny Button
A shiny button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Simple Artistic Button
A simple artistic button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Responsive
Yes
Stretchy Button
A stretchy button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
hover animation, letter-spacing transition
Responsive
Yes
Stripe Button
A stripe button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Pure CSS Flipping Button
A pure css flipping button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
easy
Features
3D Animation, Hover Effect
Responsive
Yes
Expanding Buttons
A expanding buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
collapsible, animated-toggle
Responsive
Yes
Merging Pill Filter Buttons
A merging pill filter buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, SCSS, Babel
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 50+, Safari 10+
Features
Visual Merging, Adjacent Sibling Selector, Negative Margins, Fluid Scaling
Responsive
Yes
Moving Corners with offset-path
A moving corners with offset-path built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS offset-path, CSS color-mix
Difficulty
Advanced
Features
Pure CSS, Hover Animations, Fluid Typography
Responsive
Yes
Micro-Interaction Loading Button
A micro-interaction loading button built with modern frontend techniques for responsive and reusable UI.
Call To Action Semantic Html Html Frontend Ui+5 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 49+, Edge 15+, Firefox 43+, Safari 10+
Features
Hover Expansion, Loading State, Icon Morphing, CSS Animations
Responsive
Yes

Snippets(43)

related hubs