Creating elegant buttons with CSS & HTML5

In the previous post, I informed you that from this post on there will be a revamp and the buttons and code will look really nice. Sure, they do. But in this post, I want to teach you to build such cool buttons.

Here, take a peak at what we're going to build:

View Demo View Code

The markup

Here's the HTML you'll need for creating a cool button, nothing complex here:

<a href="#" class="demo">Some anchor text</a>

That's it for the markup...

The styles

This is where the real magic goes, let me just give you the code and let your mind work at it. Then I'll explain it in detail...

@import url(http://fonts.googleapis.com/css?family=Roboto:900);
.demo {
    font-family:"Roboto", Sans-Serif;
    font-size:20px;
    border:4px solid rgba(3, 3, 3, 0.75);
    color:rgba(3, 3, 3, 0.75);
    border-radius:3px;
    background-color:rgb(255, 255, 255);
    outline:none;
    text-decoration:none;
    padding:5px 15px;
    -webkit-transition:background-color 0.5s, color 0.5s;
}
.demo:hover {
    background-color:rgba(3, 3, 3, 0.75);
    color:rgb(255, 255, 255);
    cursor:pointer;
}

And here comes the line by line explanation:

• @import: Not important... I imported a font called Roboto because I love it and used it for my buttons, you can use whatever you want.
• font-family: Sets the font of the text.
• border: Sets a solid border that is 4 pixels thick or the color rgba(3, 3, 3) that is 75% opaque.
• color: Sets the color of the text to the same color as the border with same opacity.
• border-radius: Slightly curves the border.
• background-color: Sets the background color to white.
• outline: Removes any default browser outlines.
• text-decoration: Removes all the underlines and all of that default browser stuff.
• padding: Sets 5 pixels of space between the top and bottom border of the button and the text and 15 pixels of space between the left and right border of the button and the text.
• -webkit-transition: Optional. Simply to create a smooth transition when the mouse is hovered over it. Not important, the buttons look as beautiful without it...

So that was the code for the buttons. Now let's talk about the code for the buttons on hover:

• background-color: Sets the background color of the buttons to the same color as its border with the same opacity.
• color: Sets the color of the text to white.
• cursor: Not important. This is just for fixing some issues with old browsers, your code should work just fine without this line for newer browsers...