Collection of hand-picked free HTML and CSS button code examples. Update of May 2020 collection. 54 new items.

Related Articles

  1. CSS Button Hover Effects
  2. CSS 3D Buttons
  3. CSS Download Buttons
  4. CSS Play/Pause Buttons
  5. CSS Button Click Effects
  6. CSS Button Libraries
  7. Bootstrap Buttons
  8. HTML Buttons with JavaScript
  9. jQuery Buttons

Author

  • Anders Grimsrud

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Tracking Mouse Position Without JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mike Aparicio

Made with

  • HTML / CSS

About a code

Wallet - Icon Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mary Lou

Made with

  • HTML / CSS

About a code

Ideas for CSS Button Hover Animations

Some inspiration for button hover animations using CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lisi

Made with

  • HTML / CSS (SCSS)

About a code

CSS 3D Blend Mode Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sowmya Seshadri

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Button Hover - Pattern Background Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sowmya Seshadri

Made with

  • HTML / CSS (SCSS)

About a code

Button Animation - Snowflakes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Steven Lei

Made with

  • HTML / CSS

About a code

Cyberpunk 2077 Glitch Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML / CSS

About a code

Pure CSS Cyberpunk 2077 Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Abdelrhman Said

Made with

  • HTML / CSS

About a code

Social Media Icons with Popups

Pure CSS social media icons with popups.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Balazs-D

Made with

  • HTML / CSS

About a code

Custom Animated Cartoon Style Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • martinboykov

Made with

  • HTML / CSS (SCSS)

About a code

Pixel Button Hover Animation Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive:

Dependencies: -

Author

  • Aniruddha Banerjee

Made with

  • HTML / CSS

About a code

Hover Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Zarko Rvovic

Made with

  • HTML / CSS (SCSS)

About a code

Button Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Phat X.Luong

Made with

  • HTML / CSS

About a code

Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Unleashed Design

Made with

  • HTML / CSS (Sass)

About a code

Awesome Button Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alexandre CMC Souza

Made with

  • HTML / CSS

About a code

Mouse Scroll Down Animated Icon

Mouse scroll down animated icon with chevrons pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tamino Martinius

Made with

  • HTML / CSS (SCSS)

About a code

Like Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Robson Vinicius

Made with

  • HTML / CSS

About a code

Social Buttons Hover Background Scale

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: cssbuttons

Author

  • Jack Latimer

Made with

  • HTML / CSS

About a code

cssbuttons

cssbuttons is an MIT-licensed open source project full of pure CSS & HTML buttons for developers built-in React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Joe Bocock

Made with

  • HTML / CSS

About a code

Pastel Animated Buttons

Three button design concepts for pastel offset. A simple button, a fill animated one and a slide one.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: simple-line-icons.css

Author

  • Satyam Singh

Made with

  • HTML / CSS

About a code

3D Fip Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alexander Lead

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Buttons

3D buttons with hover effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Shahir Hossaini

Made with

  • HTML / CSS

About a code

Social Media Buttons

HTML and CSS social media buttons with blur effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Share Button Hidden Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • A. Ruiz

Made with

  • HTML / CSS (SCSS)

About a code

Simple Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mahmood Bagheri

Made with

  • HTML / CSS (SCSS)

About a code

Share Profile Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

BoxShadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yuhomyan
Hover us and enjoy the satisfying animation designs!

Made with

  • HTML / CSS

About a code

Black & White Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Brighten

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Warning

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

Neumorphism Play Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Hazard Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

About a code

Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Glass

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Rainbow Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Pranjal Bhadu

Made with

  • HTML / CSS

About a code

Glowing Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Batuhan Baş

Made with

  • HTML / CSS

About a code

Stripe Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Oğuzhan Ağyar

Made with

  • HTML / CSS (SCSS)

About a code

Creative Wave Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Back to Top

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Delete

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Plum

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Atul Prajapati

Made with

  • HTML / CSS

About a code

Animated Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS)

About a code

Button Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Social

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tsukasa Aoki

Made with

  • HTML / CSS (SCSS)

About a code

Social Media Buttons Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Hello Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nour Ibram

Made with

  • HTML / CSS

About a code

3D Social Media Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • zeynep

Made with

  • HTML / CSS (SCSS)

About a code

Sunset Button

An animated button in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ...(╯°□°)╯

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Valorant Button

Recreating the (amazing!) buttons featured on Valorant from scratch based on their visual appearance.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Chat Bubble Button

Chat bubble to close animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About a code

Graph Button

Only CSS graph button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Neumorphism Buttons

Author

  • zeynep

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • G Rohit

Made with

  • HTML / CSS (SCSS)

About a code

Showing Icon on Hover in Button

Showing icons on mouseover in a button uing pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Russ Perry

Made with

  • HTML / CSS

About a code

Multi Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS

About a code

Multi Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS (SCSS)

About a code

Multi Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Vast Rideside

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Multi Button - Pillbox

Neon multi buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • vivien

Made with

  • HTML / CSS (SCSS)

About a code

CSS Multi Button

Change the $main-color to see how it shifts.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • fliseno1k

Made with

  • HTML / CSS

About a code

Liquid Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Upload Button

A no JS upload animation/microinteraction.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Cathy Dutton

Made with

  • HTML / CSS

About a code

Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • masuwa

Made with

  • HTML / CSS

About a code

Button Hover Distrotion Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • masuwa

Made with

  • HTML / CSS

About a code

Button Hover Light Reflection

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jouan Marcel

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Futuristic Button Styles

Futuristic and organic button styles with hover effect. Uses the backdrop-filter effect for a slight frosty glass effect. CSS via Sass as a preprocessor, HTML via Pug. No Javascript in use.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

Social Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, font-awesome-animation.css

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

A Button Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ahmad Emran

Made with

  • HTML / CSS

About a code

Creative Button Animation Effects

Creative button animation effects with only using HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Russ Pate

Made with

  • HTML / CSS (SCSS)

About a code

Button with Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tachyons.css

Author

  • PineappleSyrup

Made with

  • HTML / CSS (SCSS)

About a code

Only CSS Animated Border Button

Button with animated border on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS)

About a code

Amazing Button Hover

Responsive amazing button with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Anurag

Made with

  • HTML / CSS

About a code

Butterfly Hexagon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

File Upload Interaction Design

A simple file upload interaction design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Kevin Miranda

Made with

  • HTML / CSS (SCSS)

About a code

Glass Effect Social Media Buttons with Neon Glow

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Liam

Made with

  • HTML / CSS (SCSS)

About a code

Corner Border Button

With hover animation to fill the border gaps.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CTA Buttons

CSS animations: obvious CTA buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: simple-line-icons.css

Author

  • Kamil

Made with

  • HTML / CSS

About the code

Flush Button

Pure CSS button with fluid background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kamil

Made with

  • HTML / CSS

About the code

Blow Button

CSS blow button on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Laura Pinto

Made with

  • HTML / CSS (SCSS)

About the code

Hover Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Continue Application Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tawfiq abu Halawah

Made with

  • HTML / CSS

About the code

Add And Remove Buttons

Animated "add" and "remove" HTML buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • yourpalnurav

Made with

  • HTML / CSS (SCSS)

About the code

Button Border Animation

As inspired from the website of the U.S. AirForce.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Stockin

Made with

  • HTML / CSS

About a code

Social Links

CSS only animation for social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Paraskevas Dinakis

Made with

  • HTML / CSS

About a code

Multi Buttons UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Giana

Made with

  • HTML / CSS (SCSS)

About the code

CSS Button With Bubbles

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hover Me Pill Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Akshay

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Fancy Hover Animation

Button with fancy hover animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Only CSS: Fire Button

Burn!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Danil Goncharenko

Made with

  • HTML / CSS (Sass)

About the code

CSS Button Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kevin Magne

Made with

  • HTML / CSS (SCSS)

About the code

Pulse CTA Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jonno Witts

Made with

  • HTML / CSS

About the code

Wave Button

Hover the button to ride the wave!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sven

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Play Button

Simple play button in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • punit chawla

Made with

  • HTML / CSS (SCSS)

About the code

Button Love #3

Just hover your mouse to discover these beautifully themed buttons in action. Pure CSS(SCSS); absolutely no JavaScript.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Stockin

Made with

  • HTML / CSS

About a code

Hover Glow Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS)

About the code

Button Hover

Hover effect for button with arrow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Directionally Aware Pure CSS Button Hover

Directionally aware hover button with just CSS using segments and hover state checks.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Emanuele

Made with

  • HTML / CSS

About the code

Circle Button

HTML and CSS circle button with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Button Hover Effect

Pure CSS button hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Epic Button

Fluid hover effect for button in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Imran Pardes

Made with

  • HTML / CSS

About the code

CSS Button Hover Effect

CSS button hover effect with chevron arrows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

Author

  • Giana

Made with

  • HTML / CSS (SCSS)

About the code

Sass Button Border Hover Effect Mixin

CSS button with drawing effect on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

Author

  • Dion Dermott

Made with

  • HTML / CSS (Less)

About the code

Bouncy Buttons

Bouncy CSS pseudo element buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sasha

Made with

  • HTML / CSS (SCSS)

About the code

CSS Pulsing Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

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

Author

  • Saabbir Hossain

Made with

  • HTML / CSS

About a code

Transform 3D Button

An awesome simple CSS3 3D button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

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