Post thumbnail: 86 CSS Buttons

86 CSS Buttons

Collection of hand-picked free HTML and CSS button code examples: click, like/favorite, play/pause, share, swipe, etc. Update of February 2018 collection. 12 new items.

Table of Contents

  1. Click Buttons
  2. Like/Favorite Buttons

Related Articles

  1. CSS Button Hover Effects
  2. CSS 3D Buttons
  3. CSS Submit Buttons
  4. CSS Gradient Buttons
  5. CSS Flat Buttons
  6. CSS Close Buttons
  7. CSS Download Buttons
  8. CSS Play/Pause Buttons
  9. CSS Button Click Effects
  10. CSS Button Libraries

Demo image: Download Button

Author

  • Andreas Storm

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

Download Button

Download button micro interaction with SVG and little jQuery.

Demo image: Outrageously Useless Buttons, Maybe?

Author

  • Collin Smith

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Outrageously Useless Buttons, Maybe?

Button animations you probably shouldn't use.

Demo image: Pure CSS Flipping Button

Author

  • Andrej

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.

Demo image: Noise Buttons

Author

  • Andrey Vereshchak

Made with

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

About the code

Noise Buttons

Awesome noise buttons with JS.

Demo image: Custom Property Retro Buttons

Author

  • Dario Corsi

Made with

  • HTML/Slim
  • CSS/SCSS

About the code

Custom Property Retro Buttons

Playing around with CSS custom properties.

Demo image: Download Button

Author

  • Adam Kuhn

Made with

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

About the code

Download Button

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

Demo image: Download Button

Author

  • Andreas Storm

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

Download Button

Jelly download button with little jQuery.

Demo image: Animated CSS Mail Button

Author

  • Jake Giles-Phillips

Made with

  • HTML
  • CSS/SCSS

About the code

Animated CSS Mail Button

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

Demo image: Floating Animation

Author

  • Chouaib Blgn

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Animation

Cool floating button animation using HTML and CSS and jQuery.

Demo image: SVG Button Hover Effect With Snap.svg

Author

  • Joost Kiens

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.

Demo Image: Animated Rainbow Button
Demo Image: Animated Rainbow Button

Animated Rainbow Button

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

Demo Image: Download Button Animation
Demo Image: Download Button Animation

Download Button Animation

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

Demo image: Liquid Button

Author

  • Waaark

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.

Demo Image: Play Button
Demo GIF: Play Button

Play Button

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

Demo Image: Stripe Button
Demo GIF: Stripe Button

Stripe Button

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

Demo Image: SVG Filter Gooey Share, Social Media Button
Demo Image: SVG Filter Gooey Share, Social Media Button

SVG Filter Gooey Share, Social Media Button

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

Demo Image: Social Nav
Demo Image: Social Nav

Social Nav

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

Demo Image: Button Bubble Effect
Demo Image: Button Bubble Effect

Button Bubble Effect

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

Demo Image: Play/Pause Button Animation
Demo Image: Play/Pause Button Animation

Play/Pause Button Animation

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

Demo Image: Fancy Button Menu
Demo Image: Fancy Button Menu

Fancy Button Menu

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

Demo Image: Gooey Share Button
Demo Image: Gooey Share Button

Gooey Share Button

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

Demo Image: Share Button
Demo Image: Share Button

Share Button

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

Demo Image: Button Hover Effects
Demo Image: Button Hover Effects

Button Hover Effects

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

Demo Image: Social Share Buttons + Counters
Demo Image: Social Share Buttons + Counters

Social Share Buttons + Counters

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

Demo Image: Stay In Touch/Share Button
Demo Image: Stay In Touch/Share Button

Stay In Touch/Share Button

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

Demo Image: Download Animation (SVG)
Demo Image: Download Animation (SVG)

Download Animation (SVG)

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

Demo Image: Share & Social Semicircles
Demo Image: Share & Social Semicircles

Share & Social Semicircles

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

Demo Image: CSS Buttons
Demo Image: CSS Buttons

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

Demo Image: Close Icon
Demo Image: Close Icon

Close Icon

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

Demo Image: Big Fancy 3D Rotating SVG Button
Demo Image: Big Fancy 3D Rotating SVG Button

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

Demo Image: Ghost Button Animation
Demo Image: Ghost Button Animation

Ghost Button Animation

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

Demo Image: Button Animation Experiment
Demo Image: Button Animation Experiment

Button Animation Experiment

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

Demo Image: Social Buttons with Icon Fonts
Demo Image: Social Buttons With Icon Fonts

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

Demo Image: Button.css: CSS3 Button Animations
Demo Image: Button.css: CSS3 Button Animations

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

Demo Image: SVG Download Icon
Demo Image: SVG Download Icon

SVG Download Icon

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

Demo Image: 3D Animated Buttons
Demo Image: “3D” Animated Buttons

“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

Demo Image: Contact Button
Demo Image: Contact Button

Contact Button

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

Demo Image: Download Progress Interaction
Demo Image: Download Progress Interaction

Download Progress Interaction

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

Demo Image: Material Download Button
Demo Image: Material Download Button

Material Download Button

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

Demo Image: Animated Ghost Button
Demo Image: Animated Ghost Button

Animated Ghost Button

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

Demo Image: Pure CSS Menu Close Icon
Demo Image: Pure CSS Menu Close Icon

Pure CSS Menu Close Icon

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

Demo Image: Colorful CSS Buttons
Demo Image: Colorful CSS Buttons

Colorful CSS Buttons

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

Demo Image: OK Button
Demo Image: OK Button

OK Button

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

Demo Image: SVG Hotspot/Play Button Animation
Demo Image: SVG Hotspot/Play Button Animation

SVG Hotspot/Play Button Animation

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

Demo Image: 8-bit Hovers
Demo Image: 8-bit Hovers

8-bit Hovers

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

Demo Image: Button Hover Animations
Demo Image: Button Hover Animations

Button Hover Animations

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

Demo Image: Blobs Button
Demo Image: Blobs Button

Blobs Button

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

Demo Image: Simple Button Hover
Demo Image: Simple Button Hover

Simple Button Hover

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

Demo Image: Amy Winehouse Doc Button
Demo Image: Amy Winehouse Doc Button

Amy Winehouse Doc Button

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

Demo Image: YouTube Play Pause Button
Demo Image: YouTube Play Pause Button

YouTube Play Pause Button

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

Demo Image: Half Fuller Buttons
Demo Image: Half Fuller Buttons

Half Fuller Buttons

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

Demo Image: Collection Of Button Hover Effects
Demo Image: Collection Of Button Hover Effects

Collection of Button Hover Effects

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

Demo Image: Download Button Concept
Demo Image: Download Button Concept

Download Button Concept

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

Demo Image: 3D CSS Button
Demo Image: 3D CSS Button

3D CSS Button

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

Demo Image: 3D Hexagon Share Button Concept
Demo Image: 3D Hexagon Share Button Concept

3D Hexagon Share Button Concept

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

Demo Image: Button Hover States
Demo Image: Button Hover States

Button Hover States

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

Demo Image: Animated CSS3 Buttons
Demo Image: Animated CSS3 Buttons

Animated CSS3 Buttons

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

Demo Image: Animated Gradient Ghost Button Concept
Demo Image: Animated Gradient Ghost Button Concept

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

Demo Image: Animated Twitter Button
Demo Image: Animated Twitter Button

Animated Twitter Button

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

Demo Image: Button Outline Animation On Hover
Demo Image: Button Outline Animation On Hover

Button Outline Animation On Hover

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

Demo Image: Box/Button Hovers
Demo Image: Box/Button Hovers

Box/Button Hovers

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

Demo Image: Close Button Effects
Demo Image: Close Button Effects

Close Button Effects

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

Demo Image: Morphing Play/Stop Button
Demo Image: Morphing Play/Stop Button

Morphing Play/Stop Button

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

Demo Image: Social Media Icon Transitions
Demo Image: Social Media Icon Transitions

Social Media Icon Transitions

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

Demo Image: Animated Share Button
Demo Image: Animated Share Button

Animated Share Button

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

Demo Image: Share Button
Demo Image: Share Button

Share Button

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

Demo Image: Full Social CSS Hover Button
Demo Image: Full Social CSS Hover Button

Full Social CSS Hover Button

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

Demo Image: Share Social Button Thing
Demo Image: Share Social Button Thing

Share Social Button Thing

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

Demo Image: Morphing Play Button
Demo Image: Morphing Play Button

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

Demo Image: CSS3 Play/Pause Button
Demo Image: CSS3 Play/Pause Button

CSS3 Play/Pause Button

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

Demo Image: Gaming Button With Hover Effect
Demo Image: Gaming Button With Hover Effect

Gaming Button With Hover Effect

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

Demo Image: 3D Download Button w/ Meter Progress
Demo Image: 3D Download Button w/ Meter Progress

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

Demo Image: Social Swatchbook
Demo Image: Social Swatchbook

Social Swatchbook

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

Demo Image: Open/Close Button With Animation
Demo Image: Open/Close Button With Animation

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

Demo Image: Share Social Buttons
Demo Image: Share Social Buttons

Share Social Buttons

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

Click Buttons

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

Demo image: Bubbly Button

Author

  • Nour Soud

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

Demo Image: Button Ripple Effect
Demo Image: Button Ripple Effect

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

Demo Image: Button Animation With CSS Offset Paths
Demo Image: Button Animation With CSS Offset Paths

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

Like/Favorite Buttons

HTML and CSS like button examples (6 items).

Demo Image: The Twitter Like Button
Demo GIF: The Twitter Like Button

The Twitter Like Button

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

Demo Image: Like Animation — Jumpy Hearts
Demo Image: Like Animation — Jumpy Hearts

Like Animation — Jumpy Hearts

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

Demo Image: Interactive Splat Like Button
Demo GIF: Interactive Splat Like Button

Interactive Splat Like Button

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

Demo Image: Like And Favorite Buttons
Demo Image: Like And Favorite Buttons

Like And Favorite Buttons

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

Demo Image: CSS Favourite Button
Demo Image: CSS Favourite Button

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

Demo Image: Hover Intent - Like button
Demo Image: Hover Intent - Like button

Hover Intent - Like button

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

back to top