112 CSS Buttons

December 30, 2016

Collection of hand-picked free HTML and CSS buttons with little JavaScript: 3D, close, download, hover, like/favorite, play/pause, social, share, star rating and submit buttons. Demo and download code (*zip).

Table Of Contents

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

3D Buttons

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

3D Button

3D button with HTML and CSS(SCSS).
Made by Dronca Raul
September 26, 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: 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: 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

Close Buttons

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: Back To Close
Demo Image: Back To Close

Back To Close

Close button with HTML, CSS and JavaScript
Made by Stefano
February 23, 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: 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: 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

Download Buttons

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: SVG Download Icon
Demo Image: SVG Download Icon

SVG Download Icon

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

Demo Image: Fizzy CSS Button
Demo Image: Fizzy CSS Button

Fizzy CSS Button

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

Demo Image: Download Animation - CSS Only
Demo Image: Download Animation - CSS Only

Download Animation - CSS Only

Download animation with HTML and CSS.
Made by Matthew Sechrest
April 2, 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: 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: Button With Sliding Information
Demo Image: Button With Sliding Information

Button With Sliding Information

The button shows you more information when you hover it.
Made by Miro Karilahti
November 6, 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

Hover Buttons

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: 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: 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: Button
Demo Image: Button

Button

Button mouse over effect.
Made by Dicson
October 27, 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: Cool Beans Button 60fps
Demo Image: Cool Beans Button 60fps

Cool Beans Button 60fps

We can easily make our animated buttons more performant. Use transforms and opacity for animations only. Then use will-change: transform; to let the browser know what animations lie ahead.
Made by BROWNERD
August 18, 2016

Demo Image: Animation Button #3
Demo Image: Animation Button #3

Animation Button #3

Practice for hover style!
Made by lichinlin
July 28, 2016

Demo Image: Button Explore
Demo Image: Button Explore

Button Explore

Just a kind of experimental button transition.
Made by Nicolas Lanthemann
July 28, 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: 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: Animation Button #2
Demo Image: Animation Button #2

Animation Button #2

Button animation practice.
Made by lichinlin
April 30, 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: Gradient Hover Animated Button
Demo Image: Gradient Hover Animated Button

Gradient Hover Animated Button

HTML and CSS gradient hover animated button.
Made by Marcel Pirnay
January 27, 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: Animated SVG Hover Buttons
Demo Image: Animated SVG Hover Buttons

Animated SVG Hover Buttons

This is pure HTML/CSS implementation of some SVG buttons with a cool hover effect. The colors and shapes can be customized to fit your needs.
Made by Tyler Peterson
November 17, 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: 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: 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: 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: Star Trek LCARS-Style Ghost Buttons
Demo Image: Star Trek LCARS-Style Ghost Buttons

Star Trek LCARS-Style Ghost Buttons

For one of our latest project with a local information security firm, we went with a tech theme. These buttons are inspired by the computer interface seen in Star Trek with a bit of added transition effects on hover. The left and right values define the numerator and denominator of the border radius for the transition effects.
Made by Cobey Potter
March 19, 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: Slide Text On Hover Animation
Demo Image: Slide Text On Hover Animation

Slide Text On Hover Animation

Just a quick example of a simple button animation.
Made by Mads Håkansson
May 20, 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

Like/Favorite Buttons

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: 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

Play/Pause Buttons

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: Play Button
Demo Image: Play Button

Play Button

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

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: 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: Play Button
Demo Image: Play Button

Play Button

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

Demo Image: Play Button
Demo Image: Play Button

Play Button

Play button with spinning reel on hover.
Made by J Scott Smith
March 13, 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: 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

Social Buttons

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: Clean Social Buttons
Demo Image: Clean Social Buttons

Clean Social Buttons

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

Demo Image: Social Media Icon Reveal With Transition
Demo Image: Social Media Icon Reveal With Transition

Social Media icon reveal with transition

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

Demo Image: Social Connect
Demo Image: Social Connect

Social Connect

Social connect with HTML, CSS(Sass) and JS(Babel).
Made by Anthony Koch
July 19, 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: SVG Social Icons
Demo Image: SVG Social Icons

SVG Social Icons

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

Demo Image: Stylish Social Buttons
Demo Image: Stylish Social Buttons

Stylish Social Buttons

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

Demo Image: Social Media Hover Icons With Pop-Up Titles
Demo Image: Social Media Hover Icons With Pop-Up Titles

Social Media Hover Icons With Pop-Up Titles

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

Demo Image: Long Shadow Social Icons With Sass
Demo Image: Long Shadow Social Icons With Sass

Long Shadow Social Icons With Sass

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

Demo Image: Social Buttons
Demo Image: Social Buttons

Social Buttons

Social diamond buttons.
Made by Sazzad
March 12, 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: 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: Social Flip Cards
Demo Image: Social Flip Cards

Social Flip Cards

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

Demo Image: Long Shadow Icons
Demo Image: Long Shadow Icons

Long Shadow Icons

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

Demo Image: Social Icons On Hover
Demo Image: Social Icons On Hover

Social Icons On Hover

Brand logo’s show on :hover.
Made by Dan Malarkey
August 26, 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: Social Section
Demo Image: Social Section

Social Section

Social section with HTML and CSS.
Made by Dominik Dąbrowski
October 9, 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: Fancy Flat Social Button Animation
Demo Image: Fancy Flat Social Button Animation

Fancy Flat Social Button Animation

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

Social Share Buttons

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: 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: 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: Social Share Button
Demo Image: Social Share Button

Social Share Button

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

Demo Image: Social-Share Button
Demo Image: Social-Share Button

Social-Share Button

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

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

Social Share Button

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

Demo Image: Social Sharing Buttons
Demo Image: Social Sharing Buttons

Social Sharing Buttons

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

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: Slide-Out Social Buttons
Demo Image: Slide-Out Social Buttons

Slide-Out Social Buttons

An experiment with hover states and social buttons.
Made by Steven Schobert
20 November, 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: 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: Simple Share Button
Demo Image: Simple Share Button

Simple Share Button

Hover it and see what will happen next.
Made by Larry Geams Parangan
December 3, 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

Star Rating Buttons

Demo Image: Rate Star Buttons (Pure CSS)
Demo Image: Rate Star Buttons (Pure CSS)

Rate Star Buttons (Pure CSS)

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

Demo Image: Star Ratings Survey Form
Demo Image: Star Ratings Survey Form

Star Ratings Survey Form

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

Demo Image: CSS Star Ratings With Radio Buttons
Demo Image: CSS Star Ratings With Radio Buttons

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

Demo Image: Star Buttons
Demo Image: Star Buttons

Star Buttons

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

Demo Image: CSS & Radio Button Star Rating
Demo Image: CSS & Radio Button Star Rating

CSS & Radio Button Star Rating

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

Submit Buttons

Demo Image: Organic Button
Demo Image: Organic Button

Organic Button

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

Demo Image: Submit Button
Demo Image: Submit Button

Submit Button

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

Demo Image: Flyaway Send Button
Demo Image: Flyaway Send Button

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

Demo Image: Send Button Interaction Animation
Demo Image: Send Button Interaction Animation

Send Button Interaction Animation

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

Demo Image: Simple Submit Button
Demo Image: Simple Submit Button

Simple Submit Button

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

Demo Image: Animated Submit Button
Demo Image: Animated Submit Button

Animated Submit Button

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

Demo Image: Submit Button
Demo Image: Submit Button

Submit Button

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

Demo Image: Submit Button (GSAP edition)
Demo Image: Submit Button GSAP edition

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

Demo Image: Send Button With A Transition
Demo Image: Send Button With A Transition

Send Button With A Transition

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

FreeFrontend © 2016 - 2017