15+ CSS Ghost Buttons

Last Updated on by in CSS Examples
CSS Ghost Buttons

Welcome to our site. If you are looking for modern, see-through buttons, aka ghost buttons, you’re in the right spot. In this compilation, we are excited to feature a diverse range of CSS Ghost buttons with free HTML and CSS code examples, sourced from reputed sites such as CodePen, GitHub, and other reliable platforms.

CSS ghost buttons, which are usually see-through or outline-styled, give websites a subtle but noticeable look. Their see-through look draws users attention to them without being too much. These buttons combine usefulness with a sleek, modern look, making a webpage look better overall and guiding users to important parts.

Our collection of CSS ghost buttons is distinct and all-purpose. It offers numerous design styles that can cater to different website themes and user preferences. Whether you’re looking for a minimalist design or something more stylish, transparent, outlined, subtle gradient, and ghost hover effects you’re likely to get something that suits your needs in our collection.

We hope you find this curated collection useful, let’s explore and contributes uniquely to the aesthetics and functionality of a webpage.

01. Ghost Button Animation

See the Pen
Ghost Button Animation – Dribbble
by Kitsune (@kitsune)
on CodePen.


Author: Kitsune @kitsune
Links: Source Code / Demo
Created on: June 23, 2016
Made with: HTML, CSS(SCSS)

02. Splatoon Styled Liquid Fill Buttons

See the Pen
Splatoon Styled Liquid Fill Buttons
by Mark Mead (@markmead)
on CodePen.


Author: Mark Mead @markmead
Links: Source Code / Demo
Created on: September 3, 2018
Made with: HTML(Pug), CSS (SCSS)

03. Sass button border hover effect mixin

See the Pen
Sass button border hover effect mixin
by Giana (@giana)
on CodePen.


Author: Giana @giana
Links: Source Code / Demo
Created on: May 5, 2017
Made with: HTML, CSS (SCSS)

04. CSS Button with Hover Effect

See the Pen
CSS Button with Hover Effect
by Kniw Studio (@JeremyWink)
on CodePen.


Author: Kniw Studio @JeremyWink
Links: Source Code / Demo
Created on: September 22, 2019
Made with: HTML, CSS

05. Gradient hover animated button

See the Pen
Gradient hover animated button | Welcome in my world
by Marcel Pirnay (@mars2601)
on CodePen.


Author: Marcel Pirnay @mars2601
Links: Source Code / Demo
Created on: January 27, 2016
Made with: HTML, CSS

06. Ghost Button Hover Effects

See the Pen
Ghost Button Hover Effects
by Mark Mead (@markmead)
on CodePen.


Author: Mark Mead @markmead
Links: Source Code / Demo
Created on: September 27, 2018
Made with: HTML, CSS (SCSS)

07. SVG Button hover effect with snap.svg

See the Pen
SVG Button hover effect with snap.svg
by Joost Kiens (@JoostKiens)
on CodePen.


Author: Joost Kiens @JoostKiens
Links: Source Code / Demo
Created on: July 12, 2017
Made with: HTML, CSS(PostCSS), JS (babel)

08. Line & Direction Ghost Buttons

See the Pen
CodePen Challenge 2020 #05 – Line & Direction
by Paraskevas Dinakis (@perry_nt)
on CodePen.


Author: Paraskevas Dinakis @perry_nt
Links: Source Code / Demo
Created on: February 8, 2019
Made with: HTML, CSS

09. Animated Ghost Button

See the Pen
Animated Ghost Button
by Cameron (@numerical)
on CodePen.


Author: Cameron @numerical
Links: Source Code / Demo
Created on: December 18, 2014
Made with: HTML, CSS, JS

10. Pure CSS Ghost Buttons w/ Directional Awareness

See the Pen
Pure CSS Ghost Buttons w/ Directional Awareness ✨????????
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: July 13, 2019
Made with: HTML(Pug), CSS (Stylus)

11. Animated Ghost Button

See the Pen
Animated Ghost Button
by Hornebom (@Hornebom)
on CodePen.


Author: Hornebom @Hornebom
Links: Source Code / Demo
Created on: May 7, 2014
Made with: HTML, CSS

12. Some Button Styles

See the Pen
Some Button Styles
by Blake Tarter (@blaketarter)
on CodePen.


Author: Blake Tarter @blaketarter
Links: Source Code / Demo
Created on: May 8, 2014
Made with: HTML, CSS(SCSS)

13. Ghost Buttons with CSS3

See the Pen
Ghost Buttons with CSS3
by Mithicher (@mithicher)
on CodePen.


Author: Mithicher @mithicher
Links: Source Code / Demo
Created on: May 6, 2014
Made with: HTML, CSS

14. Button Collection

See the Pen
Button Collection
by alphardex (@alphardex)
on CodePen.


Author: alphardex @alphardex
Links: Source Code / Demo
Created on: November 15, 2019
Made with: HTML, CSS(SCSS)

15. Ghost Button

See the Pen
Ghost Button
by Arijit Bhattacharya (@hoodwink73)
on CodePen.


Author: Arijit Bhattacharya @hoodwink73
Links: Source Code / Demo
Created on: April 19, 2014
Made with: HTML(Pug), CSS(SCSS)

16. Ghost Button CSS

See the Pen
Ghost Button CSS #1
by Kanishk Kunal (@kanishkkunal)
on CodePen.


Author: Kanishk Kunal @kanishkkunal
Links: Source Code / Demo
Created on: November 9, 2014
Made with: HTML, CSS

17. Share Button (Ghost button)

See the Pen
Share Button (Ghost button)
by 4gray (@4gray)
on CodePen.


Author: 4gray @4gray
Links: Source Code / Demo
Created on: March 28, 2014
Made with: HTML, CSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.