149 CSS Buttons

Collection of hand-picked free HTML and CSS button code examples: 3D, click, close, download, like/favorite, play/pause, simple, social, share, star rating, submit, swipe, etc. Update of February 2018 collection. 12 new items.

Table of Contents:

1. 3D Buttons
2. Click Buttons
3. Close Buttons
4. Download Buttons
5. Like/Favorite Buttons
6. Play/Pause Buttons
7. Simple Buttons
8. Social Buttons
9. Social Share Buttons
10. Star Rating Buttons
11. Submit Buttons

Related Articles

1. CSS Radio Buttons
2. React Buttons

Author

• Collin Smith
• April 10, 2018

Links

• demo and code

Made with

• HTML (Pug) / CSS (Sass)

About the code

Outrageously Useless Buttons, Maybe?

Button animations you probably shouldn't use.

Author

• Andrej
• January 25, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Pure CSS Flipping Button

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

Author

• Andrey Vereshchak
• January 8, 2018

Links

• demo and code

Made with

• HTML/Pug
• CSS/Sass
• JavaScript/Babel (pixi.js, tweenmax.js, polyfill.js)

About the code

Noise Buttons

Awesome noise buttons with JS.

Author

• Jake Giles-Phillips
• August 2, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Animated CSS Mail Button

Material Design flat UI CSS mail button. Pure CSS animation.

Author

• Joost Kiens
• July 12, 2017

Links

• demo and code

Made with

• HTML
• CSS/PostCSS
• JavaScript/Babel (snap.svg.js)

About the code

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

• Waaark
• May 23, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jquery.js)

About the code

Liquid Button

Feel free to improve it to make it usable in real conditions, it might be tough to use it as it is right now.

Stripe Button

HTML and CSS stripe button.
Made by Felipe Bernardes
May 22, 2017

Button Bubble Effect

A hover effect using the gooey tricks.
Made by Adrien Grsmto
December 14, 2016

Fancy Button Menu

Simple animated button with double border in pseudo element.
Made by Nodws
November 14, 2016

Button Hover Effects

Some button hover effects using psuedo elements and borders.
Made by Kyle Brumm
November 4, 2016

CSS Buttons

Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes!
Made by Derek Morash
August 19, 2016

Ghost Button Animation

Ghost button animation with HTML and CSS(SCSS).
Made by Valentine
June 23, 2016

Button Animation Experiment

Another quick pen of button animation based on a Dribbble post.
Made by Valentine
June 23, 2016

Button.css: CSS3 Button Animations

A collection of CSS3 button animations. Designed to demonstrate the uses of CSS3 animations, Button.css is intended to provide a lightweight and refreshing user experience.
Made by Zixuan(Kevin) Fan
May 30, 2016

Contact Button

Contact button from dribbble shot. Only for fun.
Made by Alberto Jerez
March 18, 2016

Animated Ghost Button

HTML and CSS animated ghost button.
Made by Cameron
January 13, 2016

Colorful CSS Buttons

A collection of various types of CSS buttons in various colors.
Made by Chris Deacy
September 20, 2015

OK Button

Hover effect - animation icons.
Made by Marco Barría
September 12, 2015

8-bit Hovers

8-bit inspired hover effects.
Made by Tiffany Stoik
August 25, 2015

Button Hover Animations

A set of button hover animations.
Made by Akshay Nair
August 23, 2015

Blobs Button

Button hover effect from https://isl.co/.
Made by Nikolay Talanov
August 22, 2015

Simple Button Hover

Simple multi layer box shadow hover effect.
Made by Dominic Magnifico
August 21, 2015

Amy Winehouse Doc Button

Amy Winehouse doc button with HTML and CSS(SCSS).
Made by Eric Grucza
August 17, 2015

Half Fuller Buttons

Half fuller buttons with HTML(Pug) and CSS(SCSS).
Made by David Fuller
July 30, 2015

Collection of Button Hover Effects

A few examples of flashy hover effects.
Made by David Conner
July 10, 2015

Button Hover States

Snazzy CSS hover states for a button.
Made by James Power
May 15, 2015

Animated CSS3 Buttons

Experimental css buttons by Designify.me.
Made by Sazzad
April 25, 2015

Animated Gradient Ghost Button Concept

Ghost button. Animated gradient borders and text. Transparent background. CSS line drawing animation. Clip-path frame. No SVG. Pure CSS.
Made by Arsen Zbidniakov
April 4, 2015

Button Outline Animation On Hover

Button outline animation on hover with HTML(Haml) and CSS(SCSS).
Made by Eric Grucza
February 9, 2015

Box/Button Hovers

HTML/CSS box and button hovers.
Made by andrew wierzba
February 4, 2015

Gaming Button With Hover Effect

Bars slide from left to right on hover.
Made by kaigth
January 22, 2014

3D Buttons

HTML and CSS 3d button examples (7 items).

Author

• Gabriel Cyrillo
• April 29, 2018

Links

• demo and code

Made with

• HTML (Pug) / CSS

About the code

Wiggle Button

CSS button with wiggle effect on hover.

Author

• Comehope (张偶)
• April 25, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

3D Button Effects

Metallic glossy 3D button effects.

3D Button

HTML, CSS and JavaScript 3D button.
Made by Jacob Beers
February 17, 2017

3D Button

3D button with HTML and CSS(SCSS).
Made by Dronca Raul
September 26, 2016

Big Fancy 3D Rotating SVG Button

Button rotates in 3D when hovered and uses SVGs for dynamic text masking.
Made by J Scott Smith
July 13, 2016

"3D" Animated Buttons

Accessible buttons with hover/touch buttons with a "3D" (shadows and eleveation) using only transforms one extra span.
Made by Jonas Sandstedt
March 18, 2016

3D CSS Button

Button created for the gamers league project v2 version.
Made by Carlos G Notario
June 26, 2015

Click Buttons

HTML and CSS button click effect examples (4 items).

Author

• Nour Soud
• January 20, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

Bubbly Button

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 div's or pseudo elements (::before and ::after).

Author

• Mert Nerukuc
• September 20, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

Add Button

Inspired by Eddie Lobanovskiy's Plus expanded on Dribbble https://dribbble.com/shots/3208361-Plus-expanded.

Button Ripple Effect

Here a simple ripple effect in vanilla JS, ready to use for your project. Works in mobile too.
Made by Tommaso Poletti
June 16, 2017

Button Animation With CSS Offset Paths

A button with animating fly out dots that move along an offset path (formerly known as CSS motion paths).
Made by Nick Salloum
June 12, 2017

Close Buttons

Close button examples with HTML and CSS (7 items).

Close Animation

A little close animation that’s not a hamburger to close animation.
Made by Maneesh
May 19, 2017

CSS Close Button

A simple interactive close button.
Made by Marius Nicula
May 18, 2017

Close Icon

Close icon with HTML and CSS.
Made by Dronca Raul
August 15, 2016

Back To Close

Close button with HTML, CSS and JavaScript
Made by Stefano
February 23, 2016

Pure CSS Menu Close Icon

Pure CSS(Sass) menu icon.
Made by Dominic Kolbe
October 16, 2015

Close Button Effects

Close button effects with HTML, CSS(SCSS) and JavaScript.
Made by Jonas Badalic
January 6, 2015

Open/Close Button With Animation

Use this little bit of CSS to make an aesthetically pleasing open / close button for all of your open/close needs.
Made by Murphy Randle
July 15, 2013

Download Buttons

Download button examples with HTML and CSS (13 items).

Author

• Andreas Storm
• May 9, 2018

Links

• demo and code

Made with

• HTML / CSS (Sass) / JavaScript

About the code

Download Button

Download button micro interaction with SVG and little jQuery.

Author

• Adam Kuhn
• December 27, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Download Button

A playful springy download button with light jQuery and CSS animation.

Author

• Andreas Storm
• September 14, 2017

Links

• demo and code

Made with

• HTML / CSS (Sass) / JavaScript

About the code

Download Button

Jelly download button with little jQuery.

Download Button Animation

Download button animation with HTML/CSS/JavaScript.
Made by Denis Pasko
June 9, 2017

Download Animation (SVG)

Download button with HTML, CSS and JavaScript.
Made by Nikolay Talanov
September 21, 2016

SVG Download Icon

Click to download!
Made by Chris Gannon
May 11, 2016

Fizzy CSS Button

Fizzy CSS button with super fizzy particle action.
Made by Jamie Coulter
April 22, 2016

Download Animation - CSS Only

Download animation with HTML and CSS.
Made by Matthew Sechrest
April 2, 2016

Download Progress Interaction

Download progress interaction with HTML, CSS and JavaScript.
Made by Bhakti Al Akbar
March 4, 2016

Material Download Button

HTML, CSS(SCSS) and JavaScript(Babel) Material download button.
Made by CODEARMADA
March 1, 2016

Download Button Concept

Download button concept using canvas as progress bar.
Made by Eduardo Lopes
July 7, 2015

Button With Sliding Information

The button shows you more information when you hover it.
Made by Miro Karilahti
November 6, 2014

3D Download Button w/ Meter Progress

Animated download button (icon uses one i element) with 3D transition download meter progress bar.
Made by Terence Devine
September 23, 2013

Like/Favorite Buttons

HTML and CSS like button examples (6 items).

The Twitter Like Button

The Twitter like button made only using SVG and CSS3 animations.
Made by Robeen
January 2, 2017

Like Animation — Jumpy Hearts

Like animation with HTML(Haml), CSS(SCSS) and JavaScript.
Made by Wojtek Witkowski
November 17, 2016

Interactive Splat Like Button

Interactive splat like button in HTML, CSS and JavaScript.
Made by Gowri Prasanth V M
November 1, 2016

Like And Favorite Buttons

Like and favorite buttons with HTML, CSS and JavaScript.
Made by Ahmad Yousef
October 18, 2016

CSS Favourite Button

Just another experiment for a favourite button this time. Some nice animations etc. All in CSS, no imagery or svg’s etc.
Made by Jamie Coulter
March 18, 2015

Hover Intent - Like button

Like button with HTML, CSS(SCSS) and JavaScript.
Made by Sam Lillicrap
January 28, 2014

Play/Pause Buttons

Play button examples with HTML and CSS (13 items).

Author

• Eric Brewer
• July 12, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS
• JavaScript/Babel

About the code

Play Button

A play button animation.

Taylor’s Play Button

Pure CSS Taylor’s play button.
Made by Arnold Longequeue
June 13, 2017

Play Button

Play button transition with HTML and CSS.
Made by Baron
April 2, 2017

Bouncing Play Button

Bouncing play button made with HTML, CSS and JavaScript.
Made by mi-ca
March 13, 2017

Play/Pause Button Animation

Play/Pause button animation with HTML and CSS(SCSS) and JavaScript.
Made by Mario Duarte
December 12, 2016

Play Button

Simple play button SVG animation, still need to get it working on all browsers.
Made by Ivan Villa
July 3, 2016

YouTube Play Pause Button

Play/Pause button with SVGs only.
Made by David Darnes
August 4, 2015

SVG Hotspot/Play Button Animation

Prototype made with TimelineMax.
Made by Robert Bue
September 1, 2015

Play Button

HTML and CSS(SCSS) play button.
Made by Luke Meyrick
July 13, 2015

Play Button

Play button with spinning reel on hover.
Made by J Scott Smith
March 13, 2015

Morphing Play/Stop Button

Simple SVG effect to show state for a media playback toggle button.
Made by Brad Daily
December 14, 2014

Morphing Play Button

A play button that morphs into a stop button upon click, and back again. Inspired by material design animations.
Made by Stidges
July 5, 2014

CSS3 Play/Pause Button

CSS3 play/pause button with HTML, CSS(SCSS) and JavaScritp.
Made by Steven Fabre
June 10, 2014

Simple Buttons

HTML and CSS simple button examples (2 items).

Author

• Dario Corsi
• January 3, 2018

Links

• demo and code

Made with

• HTML/Slim
• CSS/SCSS

About the code

Custom Property Retro Buttons

Playing around with CSS custom properties.

Animated Rainbow Button

HTML and CSS animated rainbow button.
Made by lemmin
June 10, 2017

Social Buttons

Social button examples with HTML and CSS (28 items).

Author

• Nour Soud
• February 13, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

The Social Drawer

Just another drawer for your social links.

Author

• Grzegorz Witczak
• November 1, 2017

Links

• demo and code

Made with

• HTML / CSS (Stylus) / JavaScript

About the code

Group Button with SVG Icons

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Author

• Chouaib Blgn
• July 31, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jquery.js)

About the code

Floating Animation

Cool floating button animation using HTML and CSS and jQuery.

Author

• Miguel Cast
• July 6, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

3D Social Icons

Social icons vision 3D.

Social Buttons

Social buttons in HTML and CSS.
Made by Dariusz Syncerek
June 17, 2017

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transitions.
Made by fox_hover
April 26, 2017

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transitions.
Made by fox_hover
April 26, 2017

Author

• Gabrielle Wee
• January 20, 2017

Links

• demo and code

Made with

• HTML/Haml
• CSS/SCSS

About the code

Direction Aware Cube Buttons

Only CSS direction-aware cube buttons.

Social Nav

Social sprite button’s with different look and style on CSS3.
Made by Vineeth.TR
December 28, 2016

Clean Social Buttons

Anyone is free to use these buttons!
Made by Michael Rossi
November 17, 2016

Social Buttons With Tooltips

HTML and CSS Social buttons with tooltips.
Made by Luis Espinosa
August 29, 2016

Social Media icon reveal with transition

Social Media icon reveal with HTML and CSS(SCSS).
Made by Stefan Göllner
July 25, 2016

Social Connect

Social connect with HTML, CSS(Sass) and JS(Babel).
Made by Anthony Koch
July 19, 2016

Social Buttons With Icon Fonts

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.
Made by David Pottrell
June 6, 2016

SVG Social Icons

SVG social buttons with HTML and CSS(SCSS).
Made by Kevin Dewar
April 6, 2016

Stylish Social Buttons

A few cool social buttons with smooth animations.
Made by Chris Deacy
January 8, 2016

Social Media Hover Icons With Pop-Up Titles

Social media icons with HTML and CSS.
Made by Kieran Hunter
July 22, 2015

Long Shadow Social Icons With Sass

Long shadow social icons with HTML and CSS(SCSS).
Made by Creative Punch
June 5, 2015

Social Buttons

Social diamond buttons.
Made by Sazzad
March 12, 2015

Animated Twitter Button

Re-created the hornig social-share effect. Enjoy!
Made by Scott Marshall
February 12, 2015

Social Media Icon Transitions

Social media icon transitions with HTML(Haml) and CSS(Sass).
Made by Matthew Roelle
November 20, 2014

Social Flip Cards

Messing around with 3D transforms and delayed transitions.
Made by Charlotte Dann
November 18, 2014

Long Shadow Icons

Long shadow buttons with HTML and CSS(SCSS).
Made by Oliver Knoblich
October 10, 2014

Social Icons On Hover

Brand logo’s show on :hover.
Made by Dan Malarkey
August 26, 2014

Full Social CSS Hover Button

Full social HTML and CSS hover button.
Made by Wifeo
August 14, 2014

Social Section

Social section with HTML and CSS.
Made by Dominik Dąbrowski
October 9, 2013

Social Swatchbook

Pretty simple draft with transform rotate. FontAwesome for icons.
Made by Hugo Giraudel
August 3, 2013

Fancy Flat Social Button Animation

Fancy animation on flat social button.
Made by Clément Guillou
July 21, 2013

Social Share Buttons

Social share button examples with HTML and CSS (18 items).

Author

• Charlie Marcotte
• July 26, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS

About the code

Share Buttons

Share buttons with hover effects.

SVG Filter Gooey Share, Social Media Button

Click to see the goo magic.
Made by Sasha
February 24, 2017

Gooey Share Button

Gooey share button with HTML, CSS(SCSS) and JavaScript.
Made by Kirill Kiyutin
November 9, 2016

Share Button

FAB animation: share button.
Made by Ariful Islam
November 9, 2016

Social Share Buttons + Counters

Custom social share buttons for Facebook, VK.com, Twitter, LinkedIn and Pinterest.
Made by Vasiliy Lazarev
October 26, 2016

Stay In Touch/Share Button

HTML, CSS and JavaScript stay in touch/share button.
Made by Fralec
September 28, 2016

Share & Social Semicircles

A small collection of social/share buttons that take the shape of a semicircle.
Made by Matthew Juggins
September 19, 2016

Social Share Button

Social share button that pull apart into seperate buttons.
Made by Rob Vermeer
May 17, 2016

Social-Share Button

Pure CSS social-share button.
Made by Kirill Kiyutin
April 5, 2016

Social Share Button

Just another share button.
Made by Kyle Lavery
March 13, 2016

Social Sharing Buttons

Social sharing buttons with HTML and CSS
Made by Eduard Mayer
January 26, 2016

3D Hexagon Share Button Concept

You can resize the share button with the font-size property.
Made by Vincent Durand
June 2, 2015

Slide-Out Social Buttons

An experiment with hover states and social buttons.
Made by Steven Schobert
20 November, 2014

Animated Share Button

Animated share button using jQuery, Timeline Max.
Made by matthieu
November 18, 2014

Share Button

HTML, CSS and JavaScript share buttons.
Made by Vincent Durand
September 2, 2014

Share Social Button Thing

Share social button with HTML, CSS and JavaScript.
Made by JFarrow
August 13, 2014

Simple Share Button

Hover it and see what will happen next.
Made by Larry Geams Parangan
December 3, 2013

Share Social Buttons

This share button uses only Pure CSS and Web Fonts.
Made by Mario Vidov
July 3, 2013

Star Rating Buttons

Star rating button examples with HTML and CSS (8 items).

Author

• Stas Melnikov
• April 7, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Pure CSS Rating

Pure CSS rating via CSS custom properties as API.

SVG Star Rating With Half Stars

SVG star rating widget with and half star input boxes. The half stars (like 4.5) highlights on hover and on selection.
Made by Samia Ruponti
June 15, 2017

Standalone SVG CSS-Only Star Rating Component

This is a CSS-only component that dynamically generates each of the SVG icons to be used as background images for each of the stars. For the rating value to be displayed, data-rating-value HTML attribute must be updated and calculated rounding every 0.25 to reflect the proper rating.
Made by Damián Muti
May 29, 2017

Rate Star Buttons (Pure CSS)

HTML and CSS(PostCSS) rate star buttons.
Made by Valeriya
July 14, 2016

Star Ratings Survey Form

Form with iconified radio buttons, using unicode characters.
Made by Ron Gilmour
March 25, 2016

CSS Star Ratings With Radio Buttons

Replaces radio button group with filled in stars. This allows you to use a normal radio button form and simply submit the selected value.
Made by Lenny Sirivong
March 25, 2015

Star Buttons

Star buttons with HTML and CSS.
Made by Jordan-Simonds
December 4, 2014

CSS & Radio Button Star Rating

CSS star rating with HTML and CSS(LESS).
Made by Adam Orchard
July 17, 2014

Submit Buttons

Submit button in CSS (12 items).

Author

• Joshua Ward
• September 27, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

Button Loading Animation

ES6 button loading animation.

Author

• Dhanish
• July 18, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Button Submit

Submit button interaction.

Submit Button With Loading Effect

Button that brings some life to a web form.
Made by Gabriel Soares
March 1, 2017

Organic Button

Elastic button, has pounding hearth for loading animation, will burst into ready state once done.
Made by Rik Schennink
October 27, 2016

Submit Button

Submit button with HTML, CSS(SCSS) and JavaScript.
Made by Guy Waldman
August 20, 2016

Flyaway Send Button

A basic CSS animation that makes a paper airplane fly out of this “Send” button when clicked.
Made by Adrian Del Balso
May 24, 2016

Send Button Interaction Animation

HTML(Pug), CSS(SCSS) and JavaScript send button interaction animation.
Made by Irem Lopsum
August 24, 2015

Simple Submit Button

Simple submit button for Ajax with smooth loading animation and done/failed icons animated.
Made by FAISAL ALSABEA
August 3, 2015

Animated Submit Button

A simple animated submit button using CSS, JS and jQuery.
Made by Zach Cole
April 25, 2015

Submit Button

Submit button with HTML, CSS(Stylus) and JavaScript(CoffeeScript).
Made by Tamino Martinius
August 6, 2014

Submit Button GSAP Edition

Greensock controlled version of Colin Garven’s Submit button. No CSS Keyframes, all one JS timeline + SVG.
Made by auginator
August 5, 2014

Send Button With A Transition

HTML, CSS and JavaScript send button with a transition.
Made by Irem Lopsum
August 4, 2014