25+ CSS Ghost Buttons

Ghost buttons are quite popular in web design, mainly used as a secondary button. This is particularly useful when you want to ensure that your secondary button doesn’t overshadow your primary call-to-action or CTA button. We are featuring a top-hand-picked collection of HTML and CSS ghost buttons sourced from all over the internet, from the best sites like CodePen, GitHub, and more. From minimalist design to a transparent background and thin border to mesmerising hover effects, we have something for everyone.

Whether you’re a web designer or developer seeking references to visually stunning and stylish secondary (ghost) buttons, This is the platform that will quench your creative thrust. In our compilation, each item is carefully chosen, can be added to any layout, and easily suits your website or project design theme.

Without further ado, let us expose our curated collection of visually appealing 25+ CSS ghost buttons and enhance the user interaction on your site.

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)