30+ ghost buttons in HTML, CSS, and Js

Hello Coder! Welcome to Codewithrandom. Today we’ll see how to make a ghost button. Here we got the Latest Collection of free ghost buttons Examples and Source codes.

Animated Ghost Button

See the Pen <a href="https://codepen.io/numerical/pen/XJKeop" target="_blank" rel="noopener"> Animated Ghost Button</a> by Cameron (<a href="https://codepen.io/numerical" target="_blank" rel="noopener">@numerical</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Cameron
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

2. Ghost Button Animation – Dribbble

See the Pen <a href="https://codepen.io/kitsune/pen/wWoRVW" target="_blank" rel="noopener"> Ghost Button Animation – Dribbble</a> by Kitsune (<a href="https://codepen.io/kitsune" target="_blank" rel="noopener">@kitsune</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Kitsune
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

3. Some Button Styles

See the Pen <a href="https://codepen.io/blaketarter/pen/YzpzeZ" target="_blank" rel="noopener"> Some Button Styles</a> by Blake Tarter (<a href="https://codepen.io/blaketarter" target="_blank" rel="noopener">@blaketarter</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

Code By-	Blake Tarter
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

4. Gradient hover animated button | Welcome in my world

See the Pen <a href="https://codepen.io/mars2601/pen/MKVNMX" target="_blank" rel="noopener"> Gradient hover animated button | Welcome in my world</a> by Marcel Pirnay (<a href="https://codepen.io/mars2601" target="_blank" rel="noopener">@mars2601</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Marcel Pirnay
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

5. Ghost button

See the Pen <a href="https://codepen.io/html5-ninja/pen/QWyPmM" target="_blank" rel="noopener"> Ghost button</a> by HTML5 Ninja (<a href="https://codepen.io/html5-ninja" target="_blank" rel="noopener">@html5-ninja</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	HTML5 Ninja
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Less)
External Links\ Dependencies	No
Responsive	Yes

6. Animated Ghost Button

See the Pen <a href="https://codepen.io/Hornebom/pen/bGwZZQ" target="_blank" rel="noopener"> Animated Ghost Button</a> by Hornebom (<a href="https://codepen.io/Hornebom" target="_blank" rel="noopener">@Hornebom</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Hornebom
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

7. Button Collection

See the Pen <a href="https://codepen.io/alphardex/pen/VwwVLdM" target="_blank" rel="noopener"> Button Collection</a> by alphardex (<a href="https://codepen.io/alphardex" target="_blank" rel="noopener">@alphardex</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	alphardex
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

8. Ghost Button CSS #1

See the Pen <a href="https://codepen.io/kanishkkunal/pen/azoLpo" target="_blank" rel="noopener"> Ghost Button CSS #1</a> by Kanishk Kunal (<a href="https://codepen.io/kanishkkunal" target="_blank" rel="noopener">@kanishkkunal</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Kanishk Kunal
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

9. “Ghost” button

See the Pen <a href="https://codepen.io/takaneichinose/pen/rqOqNG" target="_blank" rel="noopener"> “Ghost” button</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose" target="_blank" rel="noopener">@takaneichinose</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Takane Ichinose
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Less)
External Links\ Dependencies	No
Responsive	Yes

10. Ghost Buttons – LESS mixins

See the Pen <a href="https://codepen.io/juanbrujo/pen/oNoddQ" target="_blank" rel="noopener"> Ghost Buttons – LESS mixins</a> by Jorge Epuñan (<a href="https://codepen.io/juanbrujo" target="_blank" rel="noopener">@juanbrujo</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jorge Epuñan
Demo And Download	Click Here For The Code
Language Used	HTML(Pug), CSS(Less)
External Links\ Dependencies	No
Responsive	Yes

11. Ghost Button Hover Effects

See the Pen <a href="https://codepen.io/markmead/pen/xyKNqw" target="_blank" rel="noopener"> Ghost Button Hover Effects</a> by Mark Mead (<a href="https://codepen.io/markmead" target="_blank" rel="noopener">@markmead</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Mark Mead
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

12. Button Experiments

See the Pen <a href="https://codepen.io/plfstr/pen/JjrJvO" target="_blank" rel="noopener"> Button Experiments</a> by Paul (<a href="https://codepen.io/plfstr" target="_blank" rel="noopener">@plfstr</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Paul
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

13. Share Button (Ghost button)

See the Pen <a href="https://codepen.io/4gray/pen/mdemJB" target="_blank" rel="noopener"> Share Button (Ghost button)</a> by 4gray (<a href="https://codepen.io/4gray" target="_blank" rel="noopener">@4gray</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	4gray
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

14. CodePenChallenge – Ghost Button

See the Pen <a href="https://codepen.io/michaelwyatt/pen/GYpobV" target="_blank" rel="noopener"> #CodePenChallenge – Ghost Button</a> by Michael Wyatt (<a href="https://codepen.io/michaelwyatt" target="_blank" rel="noopener">@michaelwyatt</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Michael Wyatt
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

15. Ghosts Challenge

See the Pen <a href="https://codepen.io/dyarfi/pen/OBNEJd" target="_blank" rel="noopener"> Ghosts Challenge</a> by dyarfi (<a href="https://codepen.io/dyarfi" target="_blank" rel="noopener">@dyarfi</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	dyarfi
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

16. Responsive Ghost Button

See the Pen <a href="https://codepen.io/jaevernonaquino/pen/KwPoaP" target="_blank" rel="noopener"> Responsive Ghost Button</a> by Jae Aquino (<a href="https://codepen.io/jaevernonaquino" target="_blank" rel="noopener">@jaevernonaquino</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jae Aquino
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

17. How to create minimalist Ghost Input Form

See the Pen <a href="https://codepen.io/navin_sh/pen/PoMRqX" target="_blank" rel="noopener"> How to create minimalist Ghost Input Form</a> by Naveen Singh (<a href="https://codepen.io/navin_sh" target="_blank" rel="noopener">@navin_sh</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Naveen Singh
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

18. CodePen Challenge : Ghosts

See the Pen <a href="https://codepen.io/aimieisanxious/pen/wYKyPz" target="_blank" rel="noopener"> CodePen Challenge : Ghosts</a> by Aimie (<a href="https://codepen.io/aimieisanxious" target="_blank" rel="noopener">@aimieisanxious</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Aimie
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

19. CodePenChallenge – Ghost Button

See the Pen <a href="https://codepen.io/danzen/pen/xyVZdO" target="_blank" rel="noopener"> #CodePenChallenge – Ghost Button </a> by Dan Zen (<a href="https://codepen.io/danzen" target="_blank" rel="noopener">@danzen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Dan Zen
Demo And Download	Click Here For The Code
Language Used	JS
External Links\ Dependencies	Yes
Responsive	Yes

20. Icon Ghost Buttons

See the Pen <a href="https://codepen.io/BoiseDigital/pen/NxypXa" target="_blank" rel="noopener"> Icon Ghost Buttons</a> by Nicholas (<a href="https://codepen.io/BoiseDigital" target="_blank" rel="noopener">@BoiseDigital</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Nicholas
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

21. Login Form with Ghost Button

See the Pen <a href="https://codepen.io/tanya1001/pen/KKNXKGm" target="_blank" rel="noopener"> Login Form with Ghost Button</a> by zhang xuan (<a href="https://codepen.io/tanya1001" target="_blank" rel="noopener">@tanya1001</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	zhang xuan
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

22. Ghost Button

See the Pen <a href="https://codepen.io/adobewordpress/pen/xOvNGE" target="_blank" rel="noopener"> Ghost Button</a> by Vatanay (<a href="https://codepen.io/adobewordpress" target="_blank" rel="noopener">@adobewordpress</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Vatanay
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

23. Ghost Button

See the Pen <a href="https://codepen.io/webfeelfree/pen/vYjqXo" target="_blank" rel="noopener"> Ghost Button</a> by webfeelfree (<a href="https://codepen.io/webfeelfree" target="_blank" rel="noopener">@webfeelfree</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	webfeelfree
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

24. Ghost Button

See the Pen <a href="https://codepen.io/HelpfulWilson/pen/rOoELB" target="_blank" rel="noopener"> Ghost Button</a> by Nathan (<a href="https://codepen.io/HelpfulWilson" target="_blank" rel="noopener">@HelpfulWilson</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Nathan
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

25. Ghost btn

See the Pen <a href="https://codepen.io/nslog0/pen/beMwzG" target="_blank" rel="noopener"> Ghost btn</a> by Pratchaya (<a href="https://codepen.io/nslog0" target="_blank" rel="noopener">@nslog0</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Pratchaya
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

26. Amazing animated CSS Ghost Button

See the Pen <a href="https://codepen.io/faizanasad/pen/QWGoBB" target="_blank" rel="noopener"> Amazing animated CSS Ghost Button</a> by Faizan Asad (<a href="https://codepen.io/faizanasad" target="_blank" rel="noopener">@faizanasad</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Faizan Asad
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

27. Ghost Button with Minimal CSS

See the Pen <a href="https://codepen.io/carnfieldwebdesign/pen/vYPpxW" target="_blank" rel="noopener"> Ghost Button with Minimal CSS</a> by Adam King (<a href="https://codepen.io/carnfieldwebdesign" target="_blank" rel="noopener">@carnfieldwebdesign</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adam King
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

28. Animated ghost button

See the Pen <a href="https://codepen.io/StarOnCheek/pen/MyGPQa" target="_blank" rel="noopener"> Animated ghost button</a> by Star ⭐ (<a href="https://codepen.io/StarOnCheek" target="_blank" rel="noopener">@StarOnCheek</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Star ⭐
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

29. ghost button

See the Pen <a href="https://codepen.io/luke_mori/pen/KzjzQY" target="_blank" rel="noopener"> ghost button </a> by Yoshiki MORI (<a href="https://codepen.io/luke_mori" target="_blank" rel="noopener">@luke_mori</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Yoshiki MORI
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

30. Simple Ghost Button

See the Pen <a href="https://codepen.io/sagar2510/pen/jeVqrd" target="_blank" rel="noopener"> Simple Ghost Button</a> by sagar (<a href="https://codepen.io/sagar2510" target="_blank" rel="noopener">@sagar2510</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	sagar
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

31. Ghost button (blue)

See the Pen <a href="https://codepen.io/alexx_kidd/pen/RwdBJo" target="_blank" rel="noopener"> Ghost button (blue)</a> by Panos Alexandrou (<a href="https://codepen.io/alexx_kidd" target="_blank" rel="noopener">@alexx_kidd</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Panos Alexandrou
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

So Learners that’s all. We have included 31 amazing ghost buttons in this article. I hope you enjoyed reading this. Tell your other developers about this. We would love to hear your opinions and suggestions in the comments section below.

Check out our other posts on codewithrandom to learn more about front-end development.

Thank you