10 Free CSS Ghost Button Code Snippets

Just about every website uses buttons. They might be used for CTAs, basic contact form buttons or something else altogether.

Regardless, you’ll want to figure out your site’s button design early and stick with it. One of the easiest button styles to use is the ghost button, since it requires very little texturing or gradient styles. In fact, they’re usually just flat colors!

If you like the style of ghost buttons and want to try some for yourself, then this list is for you. All of the ghost buttons below are built with pure CSS and are easy to copy and paste into any web project.

Colorful Button Styles

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

Developer Mithicher Baro created these awesome ghost buttons in a few different colors and sizes. These properties are all controlled via CSS – which makes them quite easy to customize.

You can opt for large buttons, tiny buttons, square corners or rounded corners. All of the color and padding options are easy to change right inside the CSS.

I have to say that this is one of the best button sets I’ve ever seen. Everything is super easy to change and this design really fits the definition.

Icon Ghost Buttons

See the Pen Icon Ghost Buttons by Nicholas (@BoiseDigital) on CodePen.

Sometimes you might want icons in your ghost buttons. When text just isn’t enough, that’s when you’ll want something like this.

Each button uses the same icon from the IcoMoon set but you can easily swap it out for anything you’d like. There are quite a few free icon fonts out there to use and they’re phenomenal.

And with icon fonts, you never have to worry about cropping or resizing images. You just swap out the icon’s class in your HTML and voila! Your new icon is ready to go.

These buttons should be perfect for email signups, download CTAs or anything else that requires user action.

Fancy Colors

See the Pen Fancy Button by Simon Goellner (@simeydotme) on CodePen.

Developer Simon Goellner took ghost buttons a big step further with this pack of fancy button designs.

They all use custom gradient styles with Sass code to manipulate borders. Even the typography is colored with gradients!

On hover, you’ll find some beautiful button effects with outer glows. These stray from the “norm” of filling in ghost buttons with background colors. This is a unique twist on the typical ghost button formula and a welcome addition to this list.

Bright Animation

See the Pen Ghost Button Animation – Dribbble by Valentine (@wintr) on CodePen.

I’ve yet to see a CSS hover animation that doesn’t leave me impressed. Now these buttons don’t have the fanciest animation in the world, but they definitely grab your attention.

The idea actually comes from this shot on Dribbble created by designer Nikola Popovic. With this pen, you’ll get a very similar look and feel to the original animation – but powered by custom background changes and hover effects.

This is truly a beautiful style and one of the best animated ghost buttons.

Gradient Ghost Buttons

See the Pen Gradient Ghost Buttons by Alex (@akwright) on CodePen.

Here’s one more gradient ghost pen with a focus on the gradient feature. Note that these buttons don’t have any hover effects by default. Instead, they focus on the methods of generating custom gradients.

From these button sets you’ll find 3 different gradient options:

• Box shadow gradients
• Border gradients
• Border images (boring!)

Naturally images are the safest, since they’re generally the most compatible with legacy browsers.

However, you can use the border gradient properties to really jazz up any of your ghost buttons. And this pen has all the code you’ll need to get started.

Halloween Button

See the Pen Halloween Ghost button by Robin (@lessthanthree) on CodePen.

With this festive Halloween button, we really get a taste of the word “ghost” in ghost button.

It doesn’t use any special effects beyond some hover shadows and light shining animations. But the coolest thing about this button is that it actually looks like a ghost. Out of all these years designing and studying websites, I’ve never seen a ghost button modeled after a ghost. Go figure!

This is a ghoulishly cool CSS project that makes a nice starting point for your own buttons.

Responsive Ghost Button

See the Pen Responsive Ghost Button by Jae Aquino (@jaevernonaquino) on CodePen.

Most buttons are designed to be responsive by default. But they are usually fluid-width designs that adjust based on the size of the page body.

If you check out this responsive button, you’ll notice the design resizes based on media queries. This can be a better way to handle responsive buttons if you need your layout to be pixel-perfect for all devices.

Pastel Gradients

See the Pen Gradient Ghost Button by CJ Williams (@silencekillsdesign) on CodePen.

These pastel gradient buttons are a little different than the other gradients. If you look closely, you’ll notice they don’t have many special classes or extra HTML elements.

Instead, developer CJ Williams created these buttons with more detailed background gradients and transparent borders. This way, the buttons can use their internal padding to hide the background behind the main text – but still keep the borders visible.

It also means that you can adjust the gradients to fit any color scheme you want. If you can make the gradient with pure CSS, then you can use it with these buttons.

Digital Play Button

See the Pen Ghost Button Test by Joss (@mmmkr) on CodePen.

Here’s a really unique design – and it’s one of two demos here that uses JavaScript. This playable ghost button relies on CSS for styling and JS for interactivity.

If you click the button, you can start/pause the player audio – but only after it animates into view. That’s the other big reason for the use of JavaScript.

This proves that not all ghost buttons have to be CTAs or hyperlinks. You can build some pretty cool features with ghost styles by using some creative thinking.

Button Fill Animations

See the Pen Button Fill Animation by David Stubbs (@davekilljoy) on CodePen.

Looking to add some cool hover effects to your ghost buttons? Look no further than David Stubbs’s various fill animations.

These button fills are super clean, easy to manipulate and perfect for any site. You can change background and text colors along with internal icons. They’re basically the ultimate collection of button hover effects!

I absolutely recommend this pack to any developers who want a beautiful variety of ghost buttons.

Material Ghost Buttons

See the Pen Material Design Ghost Buttons by Marco Fugaro (@marco_fugaro) on CodePen.

You can build some amazing stuff with Google’s material design styles. Some of my favorite features are the UX interactions and microinteractions originally developed for Android phones.

You can see a few of these animations in these ghost buttons. Whenever you click, they’ll automatically fill in the background with styles based on where you click. It relies mostly on JavaScript and it’s one of the craziest features I’ve seen in a ghost button.

But even if you’re not a big material design fan, there’s still plenty in this gallery to please the eye.