CSS3 Buttons

Hey guys! While working on a design for my friend @Zackify. This design will be using a ton of form inputs, so I thought why not start experimenting with some buttons. My main inspiration was the Twitter's Tweet button. I wanted buttons with a similiar effect, but not exactly the same. Here is the final result.

To be honest, I'm quite proud of it. It's the first time I've made buttons that I actually like. It's clean and simple. It's also easy to customize. Whether you want to change the colors or the way I used shadows. That's why I love CSS, it makes everything easier.

Now, let's move on to the code. For demonstration purposes, I'll be using the button element, but this could be applied to input or href elements. Here's what the HTML for the button looks like.

<button class="button">Click Me!</button>

Now for the CSS it does get a bit complicated. It involves using gradients, transitions, and box shadows, something not everyone is used to. It's pretty easy to pick up the gist of the syntax, and don't worry, I won't be using crazy syntax. The button has three states: normal, hover, and active. For the first state we apply all the basic styling we want for the button, all the other states will inherit the styling we use unless we change it. Enough talk though, more code!

.button {
    background-color: #eeeeee;
    background-image: -webkit-linear-gradient(top, #eeeeee, #d1d1d1);
    background-image: -moz-linear-gradient(top, #eeeeee, #d1d1d1);
    background-image: -o-linear-gradient(top, #eeeeee, #d1d1d1);
    background-image: -ms-linear-gradient(top, #eeeeee, #d1d1d1);
    background-image: linear-gradient(top, #eeeeee, #d1d1d1);

    border: 1px solid #cccccc;
    border-radius: 0.125em;
    box-shadow: 0 0 0.125em #cccccc;

    color: #444444;
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
    font-size: 1em;
    text-shadow: 1px 1px 0 #eeeeee;

    cursor: pointer;

    padding: 0.25em 0.5em;
    margin: 0.25em 0;

    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

Just so you guys know, I divide my code like that to further organize it and make it cleaner. It's up to you whether or not you want to use the same code style that I do. Alright! So we have the basic style, but what does it all mean? As you can see we apply the gradient and a fallback color. I won't go too much into explaining all the different vender prefixes since this is a tutorial on how to make buttons, but we need to use them for browsers that don't yet support linear-gradient yet. This way we're making our websites look awesome in past, present, and future browsers.

You will also notice how I use the em measurement, but also the px measurement. I use em to make the site more fluid, but I also use px if I'm defining 1px, just easier to me and doesn't sacrifice much. Other than that, I apply some styling to the font of the button. Most notably I use the text-shadow property. I use this to make the text have an inset look. I also set the cursor to look like a pointer, which is what the cursor looks like when you hover over a link, then I give the button some breathing space with margins and padding.

Now let's work on the other states of the button. For the hover, all we do is change colors. If you understand the code above, then this will be a little easier.

.button:hover {
    background-color: #eaeaea;
    background-image: -webkit-linear-gradient(top, #eaeaea, #c9c9c9);
    background-image: -moz-linear-gradient(top, #eaeaea, #c9c9c9);
    background-image: -o-linear-gradient(top, #eaeaea, #c9c9c9);
    background-image: -ms-linear-gradient(top, #eaeaea, #c9c9c9);
    background-image: linear-gradient(top, #eaeaea, #c9c9c9);

    border-color: #bbbbbb;
    box-shadow: 0 0 0.125em #bbbbbb;
}

There, that's it. We change the the colors basically. I don't really need to do much explaining there, lol. Next we have the active state of the button. That's the easiest since we only use one property. That being the box-shadow property. We make it inset to give it the effect of being pushed in.

.button:active {
    box-shadow: inset 0 0 0.5em #c9c9c9;
}

I hope you guys liked this tutorial and learned something new from it. I hope to write more tutorials about HTML, CSS, JS, and PHP here. Let me know what you guys want to do, and I'll see what I can make!