FreeFrontend

112 CSS Buttons

December 30, 2016 | 51 Minute Read

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

3D Buttons

Demo Image: 3D Button
3D Button (demo image)

3D Button

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

download demo and code

See the Pen 3D Button by Dronca Raul (@rauldronca) on CodePen.

Demo Image: Big Fancy 3D Rotating SVG Button
Big Fancy 3D Rotating SVG Button (demo image)

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

download demo and code

See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen.

Demo Image: 3D Animated Buttons
"3D" Animated Buttons (demo image)

"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

download demo and code

See the Pen "3D" Animated Buttons by Jonas Sandstedt (@sandstedt) on CodePen.

Demo Image: 3D CSS Button
3D CSS Button (demo image)

3D CSS Button

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

download demo and code

See the Pen jQuery +3D css button by Carlos G Notario (@CarlosGNotario) on CodePen.

Close Buttons

Demo Image: Close Icon
Close Icon (demo image)

Close Icon

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

download demo and code

See the Pen Close Icon by Dronca Raul (@rauldronca) on CodePen.

Demo Image: Back To Close
Back To Close (demo image)

Back To Close

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

download demo and code

See the Pen Back To Close by Ste by Stefano (@wisd81) on CodePen.

Demo Image: Pure CSS Menu Close Icon
Pure CSS Menu Close Icon (demo image)

Pure CSS Menu Close Icon

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

download demo and code

See the Pen Pure CSS Menu Icon - Close by Dominic Kolbe (@dominickolbe) on CodePen.

Demo Image: Close Button Effects
Close Button Effects (demo image)

Close Button Effects

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

download demo and code

See the Pen Close button effects by Jonas Badalic (@JonasBadalic) on CodePen.

Demo Image: Open/Close Button With Animation
Open/Close Button With Animation (demo image)

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 demo and code

See the Pen Open / Close button with animation by Murphy Randle (@murphyrandle) on CodePen.

Download Buttons

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

Download Animation (SVG)

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

download demo and code

See the Pen Download Animation (SVG) by Nikolay Talanov (@suez) on CodePen.

Demo Image: SVG Download Icon
SVG Download Icon (demo image)

SVG Download Icon

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

download demo and code

See the Pen SVG Download Icon by Chris Gannon (@chrisgannon) on CodePen.

Demo Image: Fizzy CSS Button
Fizzy CSS Button (demo image)

Fizzy CSS Button

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

download demo and code

See the Pen CSS Fizzy Button by Jamie Coulter (@jcoulterdesign) on CodePen.

Demo Image: Download Animation - CSS Only
Download Animation - CSS Only (demo image)

Download Animation - CSS Only

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

download demo and code

See the Pen Download Animation - CSS Only by Matthew Sechrest (@codemonkeyco) on CodePen.

Demo Image: Download Progress Interaction
Download Progress Interaction (demo image)

Download Progress Interaction

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

download demo and code

See the Pen Download Progress Interaction by Bhakti Al Akbar (@balapa) on CodePen.

Demo Image: Material Download Button
Material Download Button (demo image)

Material Download Button

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

download demo and code

See the Pen Material Download Button by CODEARMADA (@montechristos) on CodePen.

Demo Image: Download Button Concept
Download Button Concept (demo image)

Download Button Concept

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

download demo and code
Demo Image: Button With Sliding Information
Button With Sliding Information (demo image)

Button With Sliding Information

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

download demo and code

See the Pen Button with sliding information by Miro Karilahti (@miroot) on CodePen.

Demo Image: 3D Download Button w/ Meter Progress
3D Download Button w/ Meter Progress (demo image)

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

download demo and code

See the Pen 3D Download Button w/ Meter Progress by Terence Devine (@tdevine33) on CodePen.

Hover Buttons

Demo Image: Button Bubble Effect
Button Bubble Effect (demo image)

Button Bubble Effect

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

download demo and code

See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.

Demo Image: Fancy Button Menu
Fancy Button Menu (demo image)

Fancy Button Menu

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

download demo and code

See the Pen Fancy Button Menu #Codevember by Nodws (@nodws) on CodePen.

Demo Image: Button Hover Effects
Button Hover Effects (demo image)

Button Hover Effects

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

download demo and code

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Demo Image: Button
Button (demo image)

Button

Button mouse over effect.
Made by Dicson
October 27, 2016

download demo and code

See the Pen Button by Dicson (@dicson) on CodePen.

Demo Image: CSS Buttons
CSS Buttons (demo image)

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

download demo and code

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

Demo Image: Cool Beans Button 60fps
Cool Beans Button 60fps (demo image)

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

download demo and code

See the Pen Cool Beans Button 60fps by BROWNERD (@brownerd) on CodePen.

Demo Image: Animation Button #3
Animation Button #3 (demo image)

Animation Button #3

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

download demo and code

See the Pen animation button#3-hover effect by lichinlin (@lichin-lin) on CodePen.

Demo Image: Button Explore
Button Explore (demo image)

Button Explore

Just a kind of experimental button transition.
Made by Nicolas Lanthemann
July 28, 2016

download demo and code

See the Pen Button Explore by Nicolas Lanthemann (@vanderlanth) on CodePen.

Demo Image: Ghost Button Animation
Ghost Button Animation (demo image)

Ghost Button Animation

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

download demo and code

See the Pen Ghost Button Animation - Dribbble by Valentine (@wintr) on CodePen.

Demo Image: Button Animation Experiment
Button Animation Experiment (demo image)

Button Animation Experiment

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

download demo and code

See the Pen Button Animation Experiment - Dribbble by Valentine (@wintr) on CodePen.

Demo Image: Button.css: CSS3 Button Animations
Button.css: CSS3 Button Animations (demo image)

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

download demo and code

See the Pen Button.css: CSS3 Button Animations by Zixuan(Kevin) Fan (@kevinfan23) on CodePen.

Demo Image: Animation Button #2
Animation Button #2 (demo image)

Animation Button #2

Button animation practice.
Made by lichinlin
April 30, 2016

download demo and code

See the Pen animation button#2 by lichinlin (@lichin-lin) on CodePen.

Demo Image: Contact Button
Contact Button (demo image)

Contact Button

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

download demo and code

See the Pen Contact button by Alberto Jerez (@ajerez) on CodePen.

Demo Image: Gradient Hover Animated Button
Gradient Hover Animated Button (demo image)

Gradient Hover Animated Button

HTML and CSS gradient hover animated button.
Made by Marcel Pirnay
January 27, 2016

download demo and code
Demo Image: Animated Ghost Button
Animated Ghost Button (demo image)

Animated Ghost Button

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

download demo and code

See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.

Demo Image: Animated SVG Hover Buttons
Animated SVG Hover Buttons (demo image)

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

download demo and code

See the Pen Animated SVG Hover Buttons by Tyler Peterson (@Gingernaut) on CodePen.

Demo Image: Colorful CSS Buttons
Colorful CSS Buttons (demo image)

Colorful CSS Buttons

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

download demo and code

See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.

Demo Image: OK Button
OK Button (demo image)

OK Button

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

download demo and code

See the Pen OK button by Marco Barría (@fixcl) on CodePen.

Demo Image: 8-bit Hovers
8-bit Hovers (demo image)

8-bit Hovers

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

download demo and code

See the Pen 8-bit Hovers by Tiffany Stoik (@tstoik) on CodePen.

Demo Image: Button Hover Animations
Button Hover Animations (demo image)

Button Hover Animations

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

download demo and code

See the Pen Button Hover Animations by Akshay Nair (@phenax) on CodePen.

Demo Image: Blobs Button
Blobs Button (demo image)

Blobs Button

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

download demo and code

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

Demo Image: Simple Button Hover
Simple Button Hover (demo image)

Simple Button Hover

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

download demo and code

See the Pen Simple Button Hover by Dominic Magnifico (@magnificode) on CodePen.

Demo Image: Amy Winehouse Doc Button
Amy Winehouse Doc Button (demo image)

Amy Winehouse Doc Button

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

download demo and code

See the Pen Amy Winehouse Doc Button by Eric Grucza (@egrucza) on CodePen.

Demo Image: Half Fuller Buttons
Half Fuller Buttons (demo image)

Half Fuller Buttons

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

download demo and code

See the Pen Half Fuller Buttons by David Fuller (@half-fuller) on CodePen.

Demo Image: Collection Of Button Hover Effects
Collection Of Button Hover Effects (demo image)

Collection of Button Hover Effects

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

download demo and code

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Demo Image: Button Hover States
Button Hover States (demo image)

Button Hover States

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

download demo and code

See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

Demo Image: Animated CSS3 Buttons
Animated CSS3 Buttons (demo image)

Animated CSS3 Buttons

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

download demo and code

See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.

Demo Image: Animated Gradient Ghost Button Concept
Animated Gradient Ghost Button Concept (demo image)

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

download demo and code

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.

Demo Image: Star Trek LCARS-Style Ghost Buttons
Star Trek LCARS-Style Ghost Buttons (demo image)

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

download demo and code

See the Pen Star Trek LCARS-style Ghost buttons by Cobey Potter (@courcelan) on CodePen.

Demo Image: Button Outline Animation On Hover
Button Outline Animation On Hover (demo image)

Button Outline Animation On Hover

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

download demo and code

See the Pen Button outline animation on hover by Eric Grucza (@egrucza) on CodePen.

Demo Image: Box/Button Hovers
Box/Button Hovers (demo image)

Box/Button Hovers

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

download demo and code

See the Pen Box/Button Hovers by andrew wierzba (@andrewwierzba) on CodePen.

Demo Image: Slide Text On Hover Animation
Slide Text On Hover Animation (demo image)

Slide Text On Hover Animation

Just a quick example of a simple button animation.
Made by Mads Håkansson
May 20, 2014

download demo and code

See the Pen Slide text on hover animation by Mads Håkansson (@madshaakansson) on CodePen.

Demo Image: Gaming Button With Hover Effect
Gaming Button With Hover Effect (demo image)

Gaming Button With Hover Effect

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

download demo and code

See the Pen Gaming button with hover effect by kaigth (@kaigth) on CodePen.

Like/Favorite Buttons

Demo Image: Like Animation — Jumpy Hearts
Like Animation — Jumpy Hearts (demo image)

Like Animation — Jumpy Hearts

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

download demo and code

See the Pen Like Animation — Jumpy Hearts by Wojtek Witkowski (@dubstrike) on CodePen.

Demo Image: Like And Favorite Buttons
Like And Favorite Buttons (demo image)

Like And Favorite Buttons

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

download demo and code

See the Pen like and favorite buttons by Ahmad Yousef (@ahmad-y) on CodePen.

Demo Image: CSS Favourite Button
CSS Favourite Button (demo image)

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

download demo and code

See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.

Demo Image: Hover Intent - Like button
Hover Intent - Like button (demo image)

Hover Intent - Like button

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

download demo and code

See the Pen Hover Intent - Like button by Sam Lillicrap (@samueljweb) on CodePen.

Play/Pause Buttons

Demo Image: Play/Pause Button Animation
Play/Pause Button Animation (demo image)

Play/Pause Button Animation

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

download demo and code

See the Pen Play/Pause Button Animation by Mario Duarte (@MarioDesigns) on CodePen.

Demo Image: Play Button
Play Button (demo image)

Play Button

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

download demo and code

See the Pen Play Button by Ivan Villa (@ivanvillacreative) on CodePen.

Demo Image: YouTube Play Pause Button
YouTube Play Pause Button (demo image)

YouTube Play Pause Button

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

download demo and code

See the Pen YouTube Play Pause Button by David Darnes (@daviddarnes) on CodePen.

Demo Image: SVG Hotspot/Play Button Animation
SVG Hotspot/Play Button Animation (demo image)

SVG Hotspot/Play Button Animation

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

download demo and code

See the Pen SVG Hotspot/Play button animation by Robert Bue (@robbue) on CodePen.

Demo Image: Play Button
Play Button (demo image)

Play Button

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

download demo and code

See the Pen Play Button by Luke Meyrick (@lukemeyrick) on CodePen.

Demo Image: Play Button
Play Button (demo image)

Play Button

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

download demo and code

See the Pen Play Button by J Scott Smith (@jscottsmith) on CodePen.

Demo Image: Morphing Play/Stop Button
Morphing Play/Stop Button (demo image)

Morphing Play/Stop Button

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

download demo and code

See the Pen Morphing play/stop button by Brad Daily (@bradleyboy) on CodePen.

Demo Image: Morphing Play Button
Morphing Play Button (demo image)

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

download demo and code

See the Pen Morphing Play Button by Stidges (@stidges) on CodePen.

Demo Image: CSS3 Play/Pause Button
CSS3 Play/Pause Button (demo image)

CSS3 Play/Pause Button

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

download demo and code

See the Pen CSS3 PLAY/PAUSE BUTTON by Steven Fabre (@stevenfabre) on CodePen.

Social Buttons

Demo Image: Social Nav
Social Nav (demo image)

Social Nav

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

download demo and code

See the Pen Social Nav by Vineeth.TR (@vineethtr) on CodePen.

Demo Image: Clean Social Buttons
Clean Social Buttons (demo image)

Clean Social Buttons

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

download demo and code

See the Pen Clean Social Buttons by Michael Rossi (@michaelrossi) on CodePen.

Demo Image: Social Media Icon Reveal With Transition
Social Media Icon Reveal With Transition (demo image)

Social Media icon reveal with transition

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

download demo and code

See the Pen Social Media icon reveal with transition by Stefan Göllner (@goellner) on CodePen.

Demo Image: Social Connect
Social Connect (demo image)

Social Connect

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

download demo and code

See the Pen Social Connect by Anthony Koch (@anthonykoch) on CodePen.

Demo Image: Social Buttons with Icon Fonts
Social Buttons With Icon Fonts (demo image)

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

download demo and code

See the Pen Social Buttons with Icon Fonts by David Pottrell (@davidpottrell) on CodePen.

Demo Image: SVG Social Icons
SVG Social Icons (demo image)

SVG Social Icons

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

download demo and code

See the Pen SVG Social Icons by Kevin Dewar (@eskside_design) on CodePen.

Demo Image: Stylish Social Buttons
Stylish Social Buttons (demo image)

Stylish Social Buttons

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

download demo and code

See the Pen Stylish Social Buttons by Chris Deacy (@chrisdothtml) on CodePen.

Demo Image: Social Media Hover Icons With Pop-Up Titles
Social Media Hover Icons With Pop-Up Titles (demo image)

Social Media Hover Icons With Pop-Up Titles

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

download demo and code
Demo Image: Long Shadow Social Icons With Sass
Long Shadow Social Icons With Sass (demo image)

Long Shadow Social Icons With Sass

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

download demo and code

See the Pen Long shadow social icons with Sass by Creative Punch (@CreativePunch) on CodePen.

Demo Image: Social Buttons
Social Buttons (demo image)

Social Buttons

Social diamond buttons.
Made by Sazzad
March 12, 2015

download demo and code

See the Pen Social Links by Sazzad (@sazzad) on CodePen.

Demo Image: Animated Twitter Button
Animated Twitter Button (demo image)

Animated Twitter Button

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

download demo and code

See the Pen Animated Twitter Button by Scott Marshall (@ScottMarshall) on CodePen.

Demo Image: Social Media Icon Transitions
Social Media Icon Transitions (demo image)

Social Media Icon Transitions

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

download demo and code

See the Pen Social Media Icon Transitions by Matthew Roelle (@Mattykins) on CodePen.

Demo Image: Social Flip Cards
Social Flip Cards (demo image)

Social Flip Cards

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

download demo and code

See the Pen Social Flip Cards by Charlotte Dann (@pouretrebelle) on CodePen.

Demo Image: Long Shadow Icons
Long Shadow Icons (demo image)

Long Shadow Icons

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

download demo and code

See the Pen Long Shadow Icons by Oliver Knoblich (@oknoblich) on CodePen.

Demo Image: Social Icons On Hover
Social Icons On Hover (demo image)

Social Icons On Hover

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

download demo and code

See the Pen Social Icons On Hover by Dan Malarkey (@danmalarkey) on CodePen.

Demo Image: Full Social CSS Hover Button
Full Social CSS Hover Button (demo image)

Full Social CSS Hover Button

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

download demo and code

See the Pen Full social css hover button by Wifeo (@wifeo) on CodePen.

Demo Image: Social Section
Social Section (demo image)

Social Section

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

download demo and code

See the Pen Social Section by Dominik Dąbrowski (@Murkee) on CodePen.

Demo Image: Social Swatchbook
Social Swatchbook (demo image)

Social Swatchbook

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

download demo and code

See the Pen Social swatchbook by Hugo Giraudel (@HugoGiraudel) on CodePen.

Demo Image: Fancy Flat Social Button Animation
Fancy Flat Social Button Animation (demo image)

Fancy Flat Social Button Animation

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

download demo and code

See the Pen Fancy Flat Social Button Animation by Clément Guillou (@cguillou) on CodePen.

Social Share Buttons

Demo Image: Gooey Share Button
Gooey Share Button (demo image)

Gooey Share Button

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

download demo and code

See the Pen Gooey share button №1792347 by Kirill Kiyutin (@kiyutink) on CodePen.

Demo Image: Social Share Buttons + Counters
Social Share Buttons + Counters (demo image)

Social Share Buttons + Counters

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

download demo and code

See the Pen Social Share Buttons + Counters by Vasiliy Lazarev (@Belyash) on CodePen.

Demo Image: Stay In Touch/Share Button
Stay In Touch/Share Button (demo image)

Stay In Touch/Share Button

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

download demo and code

See the Pen Stay in touch/share button by Fralec (@fralec) on CodePen.

Demo Image: Share & Social Semicircles
Share & Social Semicircles (demo image)

Share & Social Semicircles

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

download demo and code

See the Pen Share & Social Semicircles by Matthew Juggins (@mattjuggins) on CodePen.

Demo Image: Social Share Button
Social Share Button (demo image)

Social Share Button

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

download demo and code

See the Pen Social share button by Rob Vermeer (@RobVermeer) on CodePen.

Demo Image: Social-Share Button
Social-Share Button (demo image)

Social-Share Button

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

download demo and code

See the Pen DailyUI#010 Social-share button by Kirill Kiyutin (@kiyutink) on CodePen.

Demo Image: Social Share Button
Social Share Button (demo image)

Social Share Button

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

download demo and code

See the Pen Social Share Button by Kyle Lavery (@koenigsegg1) on CodePen.

Demo Image: Social Sharing Buttons
Social Sharing Buttons (demo image)

Social Sharing Buttons

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

download demo and code

See the Pen Social Sharing Buttons by Eduard Mayer (@codewunder) on CodePen.

Demo Image: 3D Hexagon Share Button Concept
3D Hexagon Share Button Concept (demo image)

3D Hexagon Share Button Concept

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

download demo and code

See the Pen 3D Hexagon share button concept by Vincent Durand (@onediv) on CodePen.

Demo Image: Slide-Out Social Buttons
Slide-Out Social Buttons (demo image)

Slide-Out Social Buttons

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

download demo and code

See the Pen Slide-out social buttons by Steven Schobert (@stevenschobert) on CodePen.

Demo Image: Animated Share Button
Animated Share Button (demo image)

Animated Share Button

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

download demo and code

See the Pen Animated Share Button by matthieu (@mlegrix) on CodePen.

Demo Image: Share Button
Share Button (demo image)

Share Button

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

download demo and code

See the Pen Share Button by Vincent Durand (@onediv) on CodePen.

Demo Image: Share Social Button Thing
Share Social Button Thing (demo image)

Share Social Button Thing

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

download demo and code

See the Pen Share Social Button Thing by JFarrow (@JFarrow) on CodePen.

Demo Image: Simple Share Button
Simple Share Button (demo image)

Simple Share Button

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

download demo and code

See the Pen Simple Share Button by Larry Geams Parangan (@larrygeams) on CodePen.

Demo Image: Share Social Buttons
Share Social Buttons (demo image)

Share Social Buttons

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

download demo and code

See the Pen Share Social Buttons by Mario Vidov (@mel) on CodePen.

Star Rating Buttons

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

Rate Star Buttons (Pure CSS)

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

download demo and code

See the Pen Rate star buttons (pure css) by Valeriya (@wwwebneko) on CodePen.

Demo Image: Star Ratings Survey Form
Star Ratings Survey Form (demo image)

Star Ratings Survey Form

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

download demo and code

See the Pen Star ratings survey form by Ron Gilmour (@rgilmour) on CodePen.

Demo Image: CSS Star Ratings With Radio Buttons
CSS Star Ratings With Radio Buttons (demo image)

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

download demo and code

See the Pen CSS Star Ratings with Radio Buttons by Lenny Sirivong (@lsirivong) on CodePen.

Demo Image: Star Buttons
Star Buttons (demo image)

Star Buttons

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

download demo and code

See the Pen stars by Jordan-Simonds (@jexordexan) on CodePen.

Demo Image: CSS & Radio Button Star Rating
CSS & Radio Button Star Rating (demo image)

CSS & Radio Button Star Rating

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

download demo and code

See the Pen CSS & Radio Button Star Rating by Adam Orchard (@orchard) on CodePen.

Submit Buttons

Demo Image: Organic Button
Organic Button (demo image)

Organic Button

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

download demo and code

See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.

Demo Image: Submit Button
Submit Button (demo image)

Submit Button

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

download demo and code

See the Pen UI from Dribbble - Submit Button by Guy Waldman (@guywald) on CodePen.

Demo Image: Flyaway Send Button
Flyaway Send Button (demo image)

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

download demo and code

See the Pen Flyaway Send Button by Adrian Del Balso (@adelbalso) on CodePen.

Demo Image: Send Button Interaction Animation
Send Button Interaction Animation (demo image)

Send Button Interaction Animation

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

download demo and code

See the Pen Send button interaction animation by Irem Lopsum (@iremlopsum) on CodePen.

Demo Image: Simple Submit Button
Simple Submit Button (demo image)

Simple Submit Button

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

download demo and code
Demo Image: Animated Submit Button
Animated Submit Button (demo image)

Animated Submit Button

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

download demo and code

See the Pen Animated Submit Button by Zach Cole (@zachacole) on CodePen.

Demo Image: Submit Button
Submit Button (demo image)

Submit Button

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

download demo and code

See the Pen Submit Button by Tamino Martinius (@Zaku) on CodePen.

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

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

download demo and code

See the Pen Submit Button (GSAP edition) by auginator (@auginator) on CodePen.

Demo Image: Send Button With A Transition
Send Button With A Transition (demo image)

Send Button With A Transition

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

download demo and code

See the Pen Send button with a transition by Irem Lopsum (@iremlopsum) on CodePen.