CSS

How to make a ghost button in CSS3

With Halloween just a few days away, this seems like the perfect time to explain how to create an incredibly simple ghost button, in pure CSS.

These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site.

They’re also super easy to make, and can add real impact with just a few lines of CSS.

To build one, the first thing you need is a simple link in HTML. For the purposes of this article we’ll create one with a class of ghost and we’ll put all our CSS in the head of the HMTL document. (You’ll probably want to put the CSS in an external file if you use this in a production site.)

Here’s what the end result will look like:

The HTML

Here’s the HTML you’ll need:

<!DOCTYPE html>
<html>
    <head>
        <style type=“text/css">
        </style>
    </head>
    <body>
        <div>
            <a class="ghost" href="http://www.ghostbusters.com/">Who Ya Gonna Call?</a>
        </div>
    </body>
</html>

This simple code is just a basic HTML page with a link.

The CSS

All of our CSS goes inside the style tags.

First, we want to set up our page. There’s nothing special here, just a fews lines of styles so we’re not looking at a blank white page:

body, div
{
    width:100%;
    height:100%;
    margin:0;
    background:#545e7a;
    position:absolute;
}

Next, we want to position the button in the center of the page:

.ghost
{
    display:inline-block;
    position: relative;
    top: 50%;
    left:50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

This code changes the link to be inline-block, instead of inline. That’s important because ghost buttons nearly always sit in their own space. Next, it sets the position to relative and top left corner of the button to be 50% and 50% (in other words the middle of the page).

Because we want the center of the button to be in the center of the page (not the top left corner), we use translateX and translateY to offset it by half its own width. This is a great technique for centering just about anything. It’s so effective because it reads the offset from the size of the element, so if we change the label text later on, we won’t have to come back and adjust our CSS to accommodate the change.

Now, we need to add the ghost button’s text styles:

    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 3em;
    letter-spacing: 0.1em;
    color:#ffffff;

This is very simple. It starts with a font stack (courtesy of cssfontstack.com), ghost buttons always use modern, sans-serif fonts, so we will too. We also want to make sure that we set the font size nice and big, using ems; that means we can change the parent font size later and the button will respond. Ghost buttons tend to be a little more spaced out than regular text, so we’re adding a tiny amount of letter spacing. Lastly, ghost buttons are almost always white. We’ve got to make sure there’s an adequate amount of contrast, but we’ve already set the page background to a nice moody purple, so white is fine.

Now we need to modify the text a little:

    text-decoration:none;
    text-transform:uppercase;
    text-rendering:optimizeLegibility;

The first line gets rid of the default underline of the link. The next line converts the link’s label to uppercase, which is how ghost buttons usually look. The last line uses text-rendering to improve its readability.

Next we need to add a nice thick border, which is one of the key characteristics of a ghost button. And because the border is too tight with the default padding, we need to add a bit more:

    border:0.15em solid #fff;
    padding:0.4em 0.6em;

Lastly for this block, we want to add a transition for three different properties of the link. We want to animate the color, the background, and the border-color.

One of the key characteristics of a ghost button is that it inverts when hovered over, so we’re going to set the background, the font color and the border color in a moment, but first we’re going to set the transition for these properties.

CSS transitions are really simple to add. You just need to specify the property to animate, and the speed to animate at (you can also add easing if you want to). If you’re animating more than one property you just separate them with a comma, and of course, make sure your browser prefixed line matches the regular line.

In our case, we’re setting the properties to tween over fractionally longer periods, just to give the animation a little more interest:

    -webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;

Then we close up the style block for the ghost class:

}

Next, we add a block to define the hover styles. For a classic ghost button look, we want the text color to change to match the page background, then we want the button background to fill in to match the border color.

And, in our case, we’re going to change the border and background color to a truly hideous color that only Slimer would appreciate:

.ghost:hover
 {
     background:#91f21b;
     border-color:#91f21b;
     color:#545e7a;
 }

And that’s it, an incredibly on-trend button style that adds a minimalist touch to any page and is easy to implement.

For the copy and pasters, here’s the full code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, div
            {
                width:100%;
                height:100%;
                margin:0;
                background:#545e7a;
                position:absolute;
            }
            .ghost
            {
                /* position centered */
               display:inline-block;
                position: relative;
                top: 50%;
                left:50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                /* text styles */
                font-family: Tahoma, Verdana, Segoe, sans-serif;
                font-size: 3em;
                letter-spacing: 0.1em;
                color:#ffffff;
                /* modify text */
                text-decoration:none;
                text-transform:uppercase;
                text-rendering:optimizeLegibility;
                /* add a border */
                border:0.15em solid #fff;
                padding:0.4em 0.6em;
                /* animate the change */
                -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 300ms, background 500ms, border-color 700ms;
            }
            .ghost:hover
            {
                background:#91f21b;
                border-color:#91f21b;
                color:#545e7a;
            }
        </style>
    </head>
    <body>
        <div>
            <a class="ghost" href="http://www.ghostbusters.com/">Who Ya Gonna Call?</a>
        </div>
    </body>
 </html>

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter. More articles by Paddi MacDonnell
  • Sven

    Nice, thanks! A Codepen would be great, too.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress