30 ghost buttons in HTML, CSS

Table of Contents

30 ghost buttons in HTML, CSS

Hello Coder! Welcome to Codewithrandom. Today we’ll see how to make a ghost button. Here we got the Latest Collection of free Examples and Source codes. You can use these ghost buttons to add dark webpages, horror effect or black edition to make it more attractive, this will make your button look more interesting.

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

2. Ghost Button Animation

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

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

4. Gradient hover animated button

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

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

Output:-

Code By-	Hornebom
Demo And Download	Click Here For The Code
Language Used	”
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>.

8. Ghost Button CSS 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>.

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

10. Ghost Buttons with hover Effects

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

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
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
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
External Links\ Dependencies	Yes
Responsive	Yes

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

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
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
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
External Links\ Dependencies	No
Responsive	Yes

18. Ghosts black edition

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
External Links\ Dependencies	Yes
Responsive	Yes

19. 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
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. 2 Ghost button

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

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

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

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

Stay with us

30 ghost buttons in HTML, CSS

Animated Ghost Button

Output:-

2. Ghost Button Animation

Output:-

3. Some Button Styles

Output:-

4. Gradient hover animated button

Output:-

5. Ghost button

6. Animated Ghost Button

Output:-

7. Button Collection

Output:-

Output:-

9. “Ghost” button

Output:-

10. Ghost Buttons with hover Effects

Output:-

11. Ghost Button Hover Effects

12. Button Experiments

13. Share Button (Ghost button)

14. Ghost Button

Output:-

15. Ghosts Challenge

16. Responsive Ghost Button

17. How to create minimalist Ghost Input Form

18. Ghosts black edition

19. Ghost Button

20. Icon Ghost Buttons

21. Login Form with Ghost Button

22. Ghost Button

23. Ghost Button

24. Ghost Button

25. 2 Ghost button

Output:-

26. Amazing animated CSS Ghost Button

27. Ghost Button with Minimal

28. Animated ghost button

29. Ghost button

30. Simple Ghost Button

31. Ghost button (blue)

Output:-

You Might Also Like

Portfolio Website in Whatsapp Style Using HTML CSS and JS

15+ HTML CSS Projects With Source Code

What Is ID and CLASS in CSS? Difference Between Id and Class in CSS

Leave a Reply Cancel reply

Navigate

Subscribe Now