30+ CSS Animated Buttons

In this collection, we are featuring free 30+ HTML and CSS animated button code examples. We’ve sourced each item from CodePen, GitHub, or many more platforms for web designers, developers, and creatives to create a visually appealing and immersive click experience.

1. “3D” Animated Buttons

See the Pen <a href="https://codepen.io/sandstedt/pen/VaPoRb"> “3D” Animated Buttons</a> by Jonas Sandstedt (<a href="https://codepen.io/sandstedt">@sandstedt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonas Sandstedt
Source: Code / Demo
Created on: MARCH 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. Animated Buttons | Atul Prajapati

See the Pen <a href="https://codepen.io/atulcodex/pen/dyGPOVv"> Animated Buttons | Atul Prajapati</a> by Atul Prajapati (<a href="https://codepen.io/atulcodex">@atulcodex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Atul Prajapati
Source: Code / Demo
Created on: JUNE 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Animated CSS Mail Button

See the Pen <a href="https://codepen.io/jakegilesphillips/pen/MveNLe"> Animated CSS Mail Button</a> by Jake Giles-Phillips (<a href="https://codepen.io/jakegilesphillips">@jakegilesphillips</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jake Giles-Phillips
Source: Code / Demo
Created on: AUGUST 2, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

4. CSS3 Button Background

See the Pen <a href="https://codepen.io/tgaisser/pen/AMyjqy"> CSS3 Button Background</a> by Tony Gaisser (<a href="https://codepen.io/tgaisser">@tgaisser</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tony Gaisser
Source: Code / Demo
Created on: MARCH 4, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. CSS3 Animated buttons

See the Pen <a href="https://codepen.io/sethabbott/pen/nmyxbx"> CSS3 Animated buttons</a> by Seth Abbott (<a href="https://codepen.io/sethabbott">@sethabbott</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Seth Abbott
Source: Code / Demo
Created on: OCTOBER 31, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Button Emoji Animation

See the Pen <a href="https://codepen.io/bertdida/pen/PyXrGM"> Button emoji animation</a> by bertdida (<a href="https://codepen.io/bertdida">@bertdida</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bertdida
Source: Code / Demo
Created on: OCTOBER 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Animated Buttons

See the Pen <a href="https://codepen.io/FelixRilling/pen/kxvVwy"> Animated Buttons</a> by Felix Rilling (<a href="https://codepen.io/FelixRilling">@FelixRilling</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Felix Rilling
Source: Code / Demo
Created on: FEBRUARY 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Continue Application Hover

See the Pen <a href="https://codepen.io/aaroniker/pen/dyoMqma"> Continue Application Hover</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: FEBRUARY 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Button Border Animation

See the Pen <a href="https://codepen.io/yourpalnurav/pen/LqNmzL"> Button Border Animation</a> by yourpalnurav (<a href="https://codepen.io/yourpalnurav">@yourpalnurav</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yourpalnurav
Source: Code / Demo
Created on: JANUARY 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. Icon Buttons

See the Pen <a href="https://codepen.io/andrea-maselli/pen/KLbwJw"> Icon buttons</a> by Andrea Maselli (<a href="https://codepen.io/andrea-maselli">@andrea-maselli</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrea Maselli
Source: Code / Demo
Created on: MAY 31, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Squishy Toggle Buttons

See the Pen <a href="https://codepen.io/soulwire/pen/neJZgM"> Squishy Toggle Buttons</a> by Justin Windle (<a href="https://codepen.io/soulwire">@soulwire</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin Windle
Source: Code / Demo
Created on: FEBRUARY 08, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Pure Css Button Hover Effect

See the Pen <a href="https://codepen.io/alticreation/pen/zBZwOP"> Pure Css Button Hover effect</a> by Alexis Blondin (<a href="https://codepen.io/alticreation">@alticreation</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alticreation
Source: Code / Demo
Created on: JUNE 28, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Fancy Button Menu

See the Pen <a href="https://codepen.io/nodws/pen/KgObjM"> Fancy Button Menu #Codevember</a> by Nodws (<a href="https://codepen.io/nodws">@nodws</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nodws
Source: Code / Demo
Created on: NOVEMBER 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Video Button Animation

See the Pen <a href="https://codepen.io/milanraring/pen/QWwyLdp"> Video button animation – Only CSS</a> by Milan Raring (<a href="https://codepen.io/milanraring">@milanraring</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Milan Raring
Source: Code / Demo
Created on: DECEMBER 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. Bubbly Button

See the Pen <a href="https://codepen.io/nourabusoud/pen/ypZzMM"> Bubbly Button</a> by Nour Saud (<a href="https://codepen.io/nourabusoud">@nourabusoud</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nour Saud
Source: Code / Demo
Created on: JANUARY 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

16. CSS Button Effect

See the Pen <a href="https://codepen.io/alexandrevale/pen/ZMxQJp"> CSS Button Effect</a> by Alexandre do Vale (<a href="https://codepen.io/alexandrevale">@alexandrevale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexandre do Vale
Source: Code / Demo
Created on: SEPTEMBER 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

17. CSS Button Hover Glow Effect

See the Pen <a href="https://codepen.io/kocsten/pen/rggjXp"> Чистый CSS Button Hover Glow Effect</a> by Kocsten (<a href="https://codepen.io/kocsten">@kocsten</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kocsten
Source: Code / Demo
Created on: JUNE 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Mouse Hover Effect on Button using CSS

See the Pen <a href="https://codepen.io/Ketan0011/pen/djrJqO"> Mouse hover effect on button using CSS</a> by ketan (<a href="https://codepen.io/Ketan0011">@Ketan0011</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ketan
Source: Code / Demo
Created on: AUGUST 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. New Transaction Hover Animation

See the Pen <a href="https://codepen.io/TurkAysenur/pen/wvaGqXW"> New Transaction Hover Animation</a> by Aysenur Turk (<a href="https://codepen.io/TurkAysenur">@TurkAysenur</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aysenur Turk
Source: Code / Demo
Created on: FEBRUARY 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. CSS Sliced Button

See the Pen <a href="https://codepen.io/saraharaya/pen/NpwdGv"> CSS Sliced Button</a> by Sarah (<a href="https://codepen.io/saraharaya">@saraharaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah
Source: Code / Demo
Created on: MARCH 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Arrow Button Hover Animation

See the Pen <a href="https://codepen.io/svenfinger/pen/rqBZPP"> Arrow Button Hover Animation</a> by Sven Finger (<a href="https://codepen.io/svenfinger">@svenfinger</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sven Finger
Source: Code / Demo
Created on: SEPTEMBER 27, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Obvious CTA Buttons

See the Pen <a href="https://codepen.io/oliviale/pen/vPvvyr"> CSS Animations: Obvious CTA Buttons</a> by Olivia Ng (<a href="https://codepen.io/oliviale">@oliviale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Olivia Ng
Source: Code / Demo
Created on: MARCH 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

23. Animated Blobby Gooey Button

See the Pen <a href="https://codepen.io/leenalavanya/pen/aXMXvz"> An Animated Blobby Gooey Button</a> by Leena Lavanya (<a href="https://codepen.io/leenalavanya">@leenalavanya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Leena Lavanya
Source: Code / Demo
Created on: FEBRUARY 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Blobs Button

See the Pen <a href="https://codepen.io/hilwat/pen/BeemVX"> Blobs button</a> by Hilary (<a href="https://codepen.io/hilwat">@hilwat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hilary
Source: Code / Demo
Created on: JUNE 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. FlipCover CSS Mixin

See the Pen <a href="https://codepen.io/vveleva/pen/zYqvyd"> FlipCover CSS Mixin</a> by Velina V Veleva (<a href="https://codepen.io/vveleva">@vveleva</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Velina V Veleva
Source: Code / Demo
Created on: APRIL 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

26. CSS Button with Bubbles

See the Pen <a href="https://codepen.io/giana/pen/dwMpwp"> CSS button with bubbles</a> by Giana (<a href="https://codepen.io/giana">@giana</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Giana
Source: Code / Demo
Created on: DECEMBER 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. CSS Button Hover

See the Pen <a href="https://codepen.io/folaad/pen/YvmRpz"> CSS BUTTON HOVER </a> by Imran Pardes (<a href="https://codepen.io/folaad">@folaad</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Imran Pardes
Source: Code / Demo
Created on: JULY 08, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Buttons with Animated SVG Stroke

See the Pen <a href="https://codepen.io/michellebarker/pen/vaYxMJ"> Buttons with animated SVG stroke</a> by Michelle Barker (<a href="https://codepen.io/michellebarker">@michellebarker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michelle Barker
Source: Code / Demo
Created on: JULY 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Pure CSS Button with Ring Indicator

See the Pen <a href="https://codepen.io/mccombsc/pen/ZEzxWPy"> Pure CSS Button with Ring Indicator</a> by Cole McCombs (<a href="https://codepen.io/mccombsc">@mccombsc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cole McCombs
Source: Code / Demo
Created on: SEPTEMBER 10, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Button Animation Experiment

See the Pen <a href="https://codepen.io/kitsune/pen/beBJBb"> Button Animation Experiment – Dribbble</a> by Kitsune (<a href="https://codepen.io/kitsune">@kitsune</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kitsune
Source: Code / Demo
Created on: JUNE 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Animation Submit Button

See the Pen <a href="https://codepen.io/valentingalmand/pen/MYMZZK"> animation submit button</a> by Valentin Galmand (<a href="https://codepen.io/valentingalmand">@valentingalmand</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Valentin Galmand
Source: Code / Demo
Created on: APRIL 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS).JavaScript