Collection of free, hand-picked CSS Buttons. It will be updated with two new buttons on July 20, 2023.
Welcome to our eye-catching collection of free CSS button samples! Each of the examples presented here has been skillfully created using HTML and CSS, giving you many ideas for your web design projects.
These CSS buttons will grab your attention, whether you’re a front-end developer, a web designer, or just someone who is curious about them. Our collection includes a variety of themes ideal for various online apps, from elegant, minimalistic layouts to colorful, dynamic ones.
Psychedelic Buttons
Author: Luke Meyrick · Made with: Pug / SCSS · Created: June 23,2021 · Updated: June 27,2021
CSS Skateboard
Author: Luke Meyrick · Made with: Pug / SCSS · Created: June 19,2021 · Updated: June 21,2021
CSS Button Rollover – Growing border
Author: r8n5n · Made with: HTML / CSS · Created: September 23,2013 · Updated: September 23,2013
Generic CSS Button Kit
Author: Phil Hoyt · Made with: HTML / CSS · Created: February 03,2014 · Updated: February 03,2014
Colorful CSS Buttons
Author: Pali Madra · Made with: HTML / CSS · Created: June 24,2014 · Updated: June 24,2014
CSS button hover effect
tags: button, hover, simple, design, material
Author: Julia · Made with: HTML / CSS · Created: FEBRUARY 14, 2017 · Updated: SEPTEMBER 25, 2017
CSS Button Hover
Pure CSS button. (Tags: CSS, button, animation, SVG, hover)
Author: Imran Pardes · Made with: HTML / CSS · Created: July 8, 2018 · Updated: OCTOBER 26, 2018
Pure CSS loading animation for buttons
A simple test with pure CSS loading animation for buttons (uses jQuery to toggle class).
Author: Robin · Made with: HTML, CSS and JavaScript · Created: JANUARY 30, 2015
Shifting Material Button Modal
Two call-to-action buttons that give context to your modals in a Material Design fashion.
Author: Ettrics · Made with: HTML, CSS and JavaScript · Created: MARCH 18, 2015
Button with Built-in Loading Indicator -JS and SCSS
Button with Built-in Loading Indicator
Author: Elior Tabeka · Made with: HTML, CSS and JavaScript · Created: AUGUST 15, 2016
Simple CSS buttons for Disabled Buttons
For browsers that support CSS3, there’s a simple cursor available to help users understand certain elements that may be disabled due to page logic. So, if you have a button that becomes enabled only after a certain page action is taken (like filling out a form), you can use cursor: not-allowed to reinforce the state using the mouse pointer.
Author: Scott Dawson · Made with: HTML, CSS · Created: MARCH 19, 2013
Submit button loader after submit
Submit button with loader after submit. No CSS Keyframes, all one JS timeline + SVG.
Author: auginator · Made with: HTML, CSS and JavaScript · Created: AUGUST 05, 2014
Button animation practice
Button animation practice
Author: lichinlin · Made with: HTML, CSS and JavaScript · Created: APRIL 21, 2016
SVG Button hover effect with snap.svg
Simple button hover effect by replacing the text in a button with an svg element which mimics the button in order to create an effect which can not (easily?) be done with css.
Author: Joost Kiens · Made with: HTML, CSS and JavaScript · Created: JULY 12, 2017
Gradient Button with translate
Gradient button with translate on hover
Author: Eric Grucza · Made with: HTML, CSS · Created: APRIL 08, 2015
3D Paper button effects
Try out and illustrate some of the subtle button effects you can create just using box-shadow and borders on pseudo–elements. Tested in latest Chrome and Firefox, but no reason it shouldn’t work in all latest browsers.
Author: Ashley Nolan · Made with: HTML, CSS · Created: JULY 15, 2014
Button Hover States
Snazzy CSS hover states for a button.
Author: James Power · Made with: HTML, CSS · Created: MAY 15, 2015
Button Hover Effects
Some button hover effects using psuedo elements and borders.
Author: Kyle Brumm · Made with: HTML, CSS and JavaScript · Created: NOVEMBER 23, 2014
Pulsing Button
Pulsing button using css3 keyframe animation.
Author: Sean Michael · Made with: HTML, CSS · Created: JULY 24, 2013
Twitter Button Concept using only CSS
Nice twitter button with door open like concept
Author: Bennett Feely · Made with: HTML, CSS · Created: JANUARY 15, 2013
Some simple buttons
Just some simple buttons
Author: Ottis Kelleghan · Made with: HTML, CSS and JavaScript · Created: JUNE 15, 2013
Button using :after and box-shadow
Hover Buttons which look good, feel good and work good. This requires only CSS. Pure CSS button fun, no strings attached – Just Hover and appreciate!
Author: punit chawla · Made with: HTML, CSS · Created: JANUARY 21, 2019
Purely CSS Button
Amazing and powerful the CSS Check-Box Hack is. No JS in this button!
Author: Jorge Reyes · Made with: HTML, CSS · Created: JANUARY 22, 2019
The radio button highlight Underground
The radio button highlight travels underground
Author: Mikael Ainalem · Made with: HTML, CSS · Created: JANUARY 15, 2019
3D Retro Buttons
3D push buttons with a retro style and font. The first button is a push button that pushes to the center and tilts left or right based on the cursor’s location while hovering. It is styled similar to an old-school game console button. These buttons have been configured with a sm, md, lg size classes along with bootstrap-esque classes such as primary, secondary, danger, warning, success and info. Second button is a loader button with it’s own progress bar when pushed. It only pushes in the center, but then opens upwards to show a progress bar on it’s front side. It will either show a checkmark or X when finished based on success of action.
Author: Mike @ Titan Global Tech · Made with: HTML, CSS and JavaScript · Created: AUGUST 06, 2018
Animated CSS Button
First take on newest CodePen challenge. Animated button in Sass
Author: Anno H. · Made with: HTML, CSS · Created: JANUARY 09, 2019
Custom Checkbox and radio button Checklists
Custom Checklists Step-by-Step Guide. Have demo for both radio and checkbox custom tutorial and demo
Author: Brandon McConnell · Made with: HTML, CSS and JavaScript · Created: APRIL 25, 2018
Progress Button Microinteractions
Made an example button for uploading with microinteraction.
Author: Takane Ichinose · Made with: HTML, CSS and JavaScript · Created: JANUARY 08, 2019
Slidey radios
A less-weird-but-still-weird remix of ‘Swappy radios’
Author: Liam · Made with: HTML, CSS and JavaScript · Created: JANUARY 05, 2019
Transitional Buttons using only CSS
Using of transitions in button hover effects.
Author: Vitaliy · Made with: HTML, CSS · Created: APRIL 15, 2014
Angularjs Material floating button directive
Customizable, semantic Material design floating action menu with buttons, implemented as an Angularjs directive. Also available in vanilla html.
Author: nobitagit · Made with: HTML, CSS and JavaScript · Created: DECEMBER 15, 2014
CSS3 Rounded Buttons
CSS3 Rounded Buttons developed using css and html
Author: Burak Kaya · Made with: HTML, CSS and JavaScript · Created: DECEMBER 10, 2012
CSS3 3d flip button
CSS3 button w/ 3d transform using no JS, no imgs, and No icon-fonts
Author: Sean Michael · Made with: HTML, CSS · Created: SEPTEMBER 21, 2013
3D Parallax Buttons
3D pushable buttons with a real perspective and a parallax-like effect when scrolling. Made with CSS 3D transforms.
Author: Alexander Futekov · Made with: HTML, CSS and JavaScript · Created: MAY 08, 2013
Topcoat Button Bar
Default style for Topcoat Button Bar. Requirements are portable and accessible markup with flexible and performant css. No javascript required
Author: Topcoat · Made with: HTML, CSS · Created: AUGUST 07, 2013
Hand-Drawn Border Buttons
“Hand-Drawn” border effect on buttons w/CSS border-radius. FYI: There is a bug when rendering the dotted / dashed borders in FF. Rendering solid borders in FF is fine.
Author: Tiffany Rayside · Made with: HTML, CSS · Created: FEBRUARY 15, 2016
Colorful CSS Buttons
A collection of various types of CSS buttons in various colors.
Author: Chris Deacy · Made with: HTML, CSS · Created: MAY 04, 2015
Button bubble effect
A hover effect using the gooey tricks.
Author: Adrien Grsmto · Made with: HTML, CSS and JavaScript · Created: JUNE 30, 2015
CSS-only Custom Radio Buttons
Based on the webdesign tuts+ article (link below) but instead of using images I used only css.
Author: Mitch McCline · Made with: HTML, CSS and JavaScript · Created: MAY 13, 2013
Flyaway Send Button
A basic CSS animation that makes a paper airplane fly out of this “Send” button when clicked.
Author: Adrian Del Balso · Made with: HTML, CSS and JavaScript · Created: JUNE 18, 2014
Bubbly Button with click effect
Made the bubbles using “radial-gradient” for background-image. I believe this property is so cool that you can draw many things without adding extra divs or pseudo elements (::before and ::after)
Author: Nour Saud · Made with: HTML, CSS and JavaScript · Created: JANUARY 20, 2018
3D flip button
Prototype for 3D flip button.
Author: Rik Schennink · Made with: HTML, CSS and JavaScript · Created: JUNE 07, 2013
Sign-post arrow buttons
Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements. CSS arrow buttons
Author: Giana · Made with: HTML, CSS · Created: AUGUST 09, 2015
Button hover effects with box-shadow
Making some basic animations with box-shadows. No extra elements or even pseudo elements required.
Author: Giana · Made with: HTML, CSS · Created: JUNE 04, 2017
Organic Button
Elastic button, has pounding hearth for loading animation, will burst into ready state once done.
Author: Rik Schennink · Made with: HTML, CSS and JavaScript · Created: MARCH 12, 2014
CSS3 Button Hover Effects with FontAwesome
Pure CSS3 Button Hover Effects
Author: fox_hover · Made with: HTML, CSS · Created: APRIL 04, 2017
Activate Button animation
Cool Activate and Waiting Button animation using HTML, CSS and JavaScript.
Author: Aaron Iker · Made with: HTML, CSS and JavaScript · Created: DECEMBER 17, 2018
Creative Buttons using just CSS
Creative Buttons using just CSS. Can be converted to SCSS for flexibility
Author: Nathan Schmidt · Made with: HTML, CSS · Created: MARCH 08, 2018
CSS button with different transition effects
CSS Button with different on hover transition effects developed using css and html.
Author: Robin Treur · Made with: HTML, CSS · Created: DECEMBER 03, 2015
Button Hover Effects
CSS Button with 20 diffrent hover animation effects developed using css and html.
Author: Rosa · Made with: HTML, CSS · Created: OCTOBER 27, 2016
CSS Button with Angled Sides
CSS Button with Angled Sides developed using only css and html.
Author: Peter Hrynkow · Made with: HTML, CSS · Created: JANUARY 09, 2013
CSS Buttons with animations
CSS Buttons with different animations reactions
Author: Rémi Lacorne · Made with: HTML, CSS · Created: JULY 16, 2013
Six Pure CSS Button Hover Animations
Six Pure CSS Button Hover Animations
Author: Christian · Made with: HTML, CSS · Created: JULY 22, 2016
Very creative CSS Buttons | Depth Effect
Very creative CSS Buttons | Depth Effect. Developed using css, html and javascript
Author: Praveen Bisht · Made with: HTML, CSS and JavaScript · Created: NOVEMBER 28, 2017
Next & Prev CSS buttons
Next & Prev CSS buttons.CSS buttons for next and previous button for sliders, or whatever.
Author: Andréas Lundgren · Made with: HTML, CSS · Created: MARCH 04, 2013
Simple CSS Button Hover Effect
Simple CSS Button Hover Effect. Simple, but good looking :hover and :active transition for buttons and links styled as buttons.
Author: Andréas Lundgren · Made with: HTML, CSS and JavaScript · Created: JUNE 01, 2016
CSS button transitions
CSS Button Animations styles.Playing around with some CSS button transitions. Possible repo for future use. Learning experience for me dealing with browser compatibility.
Author: Alex Loomer · Made with: HTML, CSS · Created: FEBRUARY 07, 2017
Free Bootstrap CSS Buttons
Bootstrap-free CSS Buttons.A pure CSS button style that you can put on anchor tags, buttons, inputs, & labels. Demo and download available.
Author: Tommy Hodgins · Made with: HTML, CSS · Created: JANUARY 27, 2017
Enlarge button effect on hover
Button zoom effect on hover. CSS Button enlarge effect using only css and html. Demo and download available.
Author: sasha · Made with: HTML, CSS · Created: JANUARY 27, 2017
