25+ CSS Ghost Buttons

A top collection of 25+ HTML and CSS ghost button code snippets, each item is free, customizable and best for web designers, developers, and UI/UX designers.

1. Ghost button

See the Pen <a href="https://codepen.io/visualcomposer/pen/aRmbNG"> 👻 Ghost button 🧟 #codepenchallenge #cpc-ghosts</a> by Visual Composer (<a href="https://codepen.io/visualcomposer">@visualcomposer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Visual Composer
Source: Code / Demo
Created on: OCTOBER 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript(Babel)

2. Animated Ghost Button

See the Pen <a href="https://codepen.io/Hornebom/pen/bGwZZQ"> Animated Ghost Button</a> by Hornebom (<a href="https://codepen.io/Hornebom">@Hornebom</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hornebom
Source: Code / Demo
Created on: MAY 7, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Gradient Ghost Button

See the Pen <a href="https://codepen.io/silencekillsdesign/pen/LVQdJw"> Gradient Ghost Button</a> by CJ Williams (<a href="https://codepen.io/silencekillsdesign">@silencekillsdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CJ Williams
Source: Code / Demo
Created on: JULY 2, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

4. Pure CSS Ghost Buttons w/ Directional Awareness

See the Pen <a href="https://codepen.io/jh3y/pen/jjRezM"> Pure CSS Ghost Buttons w/ Directional Awareness ✨👻😎</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: JULY 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Stylus)

5. Gradient hover animated button

See the Pen <a href="https://codepen.io/mars2601/pen/MKVNMX"> Gradient hover animated button | Welcome in my world</a> by Marcel Pirnay (<a href="https://codepen.io/mars2601">@mars2601</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marcel Pirnay
Source: Code / Demo
Created on: JANUARY 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Some Button Styles

See the Pen <a href="https://codepen.io/blaketarter/pen/YzpzeZ"> Some Button Styles</a> by Blake Tarter (<a href="https://codepen.io/blaketarter">@blaketarter</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Blake Tarter
Source: Code / Demo
Created on: MAY 8, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Sass button border hover effect mixin

See the Pen <a href="https://codepen.io/giana/pen/xdXpJB"> Sass button border hover effect mixin</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: MAY 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Animated Ghost Button

See the Pen <a href="https://codepen.io/numerical/pen/XJKeop"> Animated Ghost Button</a> by Cameron (<a href="https://codepen.io/numerical">@numerical</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cameron
Source: Code / Demo
Created on: DECEMBER 18, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

9. Ghost Buttons with CSS3

See the Pen <a href="https://codepen.io/mithicher/pen/NWREzO"> Ghost Buttons with CSS3</a> by Mithicher (<a href="https://codepen.io/mithicher">@mithicher</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mithicher
Source: Code / Demo
Created on: MAY 6, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Ghost Button Animation

See the Pen <a href="https://codepen.io/kitsune/pen/wWoRVW"> Ghost Button Animation – 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)

11. Line & Direction Ghost Buttons

See the Pen <a href="https://codepen.io/perry_nt/pen/YzXPGEZ"> CodePen Challenge 2020 #05 – Line & Direction</a> by Paraskevas Dinakis (<a href="https://codepen.io/perry_nt">@perry_nt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paraskevas Dinakis
Source: Code / Demo
Created on: FEBRUARY 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. CSS Button with Hover Effect

See the Pen <a href="https://codepen.io/JeremyWink/pen/LYPMLLV"> CSS Button with Hover Effect</a> by Kniw Studio (<a href="https://codepen.io/JeremyWink">@JeremyWink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kniw Studio
Source: Code / Demo
Created on: SEPTEMBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Splatoon Styled Liquid Fill Buttons

See the Pen <a href="https://codepen.io/markmead/pen/mGmqrJ"> Splatoon Styled Liquid Fill Buttons</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: SEPTEMBER 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

14. Ghost Button Hover Effects

See the Pen <a href="https://codepen.io/markmead/pen/xyKNqw"> Ghost Button Hover Effects</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: SEPTEMBER 27, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. Button Collection

See the Pen <a href="https://codepen.io/alphardex/pen/VwwVLdM"> Button Collection</a> by alphardex (<a href="https://codepen.io/alphardex">@alphardex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alphardex
Source: Code / Demo
Created on: NOVEMBER 15, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Ghost Button CSS

See the Pen <a href="https://codepen.io/kanishkkunal/pen/azoLpo"> Ghost Button CSS #1</a> by Kanishk Kunal (<a href="https://codepen.io/kanishkkunal">@kanishkkunal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kanishk Kunal
Source: Code / Demo
Created on: NOVEMBER 9, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. SVG Button hover effect with snap.svg

See the Pen <a href="https://codepen.io/JoostKiens/pen/LLMoeW"> SVG Button hover effect with snap.svg</a> by Joost Kiens (<a href="https://codepen.io/JoostKiens">@JoostKiens</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joost Kiens
Source: Code / Demo
Created on: JULY 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS), JS (Babel)

18. Ghost Button

See the Pen <a href="https://codepen.io/hoodwink73/pen/qBZwRy"> Ghost Button </a> by Arijit Bhattacharya (<a href="https://codepen.io/hoodwink73">@hoodwink73</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arijit Bhattacharya
Source: Code / Demo
Created on: APRIL 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

19. Share Button (Ghost button)

See the Pen <a href="https://codepen.io/4gray/pen/mdemJB"> Share Button (Ghost button)</a> by 4gray (<a href="https://codepen.io/4gray">@4gray</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: 4gray
Source: Code / Demo
Created on: MARCH 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Ghost button

See the Pen <a href="https://codepen.io/html5-ninja/pen/QWyPmM"> Ghost button</a> by HTML5 Ninja (<a href="https://codepen.io/html5-ninja">@html5-ninja</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: HTML5 Ninja
Source: Code / Demo
Created on: APRIL 10, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

21. Ghost Buttons – LESS mixins

See the Pen <a href="https://codepen.io/juanbrujo/pen/oNoddQ"> Ghost Buttons – LESS mixins</a> by Jorge Epuñan (<a href="https://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Epuñan
Source: Code / Demo
Created on: JULY 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less)

22. Halloween Ghost button

See the Pen <a href="https://codepen.io/lessthanthree/pen/dyBqKG"> Halloween Ghost button</a> by Robin (<a href="https://codepen.io/lessthanthree">@lessthanthree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robin
Source: Code / Demo
Created on: OCTOBER 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Less)

23. “Ghost” button

See the Pen <a href="https://codepen.io/takaneichinose/pen/rqOqNG"> “Ghost” button</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: OCTOBER 2, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

24. Ghosts Challenge

See the Pen <a href="https://codepen.io/dyarfi/pen/OBNEJd"> Ghosts Challenge</a> by dyarfi (<a href="https://codepen.io/dyarfi">@dyarfi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: dyarfi
Source: Code / Demo
Created on: OCTOBER 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Icon Ghost Buttons

See the Pen <a href="https://codepen.io/BoiseDigital/pen/NxypXa"> Icon Ghost Buttons</a> by Nicholas (<a href="https://codepen.io/BoiseDigital">@BoiseDigital</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicholas
Source: Code / Demo
Created on: JANUARY 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Login Form with Ghost Button

See the Pen <a href="https://codepen.io/tanya1001/pen/KKNXKGm"> Login Form with Ghost Button</a> by zhang xuan (<a href="https://codepen.io/tanya1001">@tanya1001</a>) on <a href="https://codepen.io">CodePen</a>. Author: zhang xuan
Source: Code / Demo
Created on: FEBRUARY 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)