I made a button!

It has always been interesting to me how web design and web development are so closely related yet so different. Usually if someone is good at one, they are not so hot at the other. Maybe it's a left brain/right brain issue. Maybe it's something vastly more complex. Personally I believe it is a matter of time. If I focus all my energy in development, my knowledge of design diminishes; and vice versa. Granted people will always find one easier than the other, but like with all things the more you do it the better you get (even if it doesn't come to you naturally).

I leave a lot to be desired on both design and development. I like the programming side more, but the more I learn the dumber I feel. The design side is pleasing because the results come so quick, though my color picking skills are still at a kindergarten level. All that being said; I made a button!

Edit: I know it doesn't work right in IE. Tough.

Buttons should be simple. This one is done all in HTML and CSS. There are millions of tutorials already on the web about how to make a button. Mine follows my thought process, and it just might be the key to help someone make their own button.

Let's jump right into the HTML part. It's simple, in fact it's just a button wrapped in an <a> tag to create the link to another page:

<a href="na" title="I mades it"><button id="more-button">More Info</button></a>

Now the fun part; CSS does all the good stuff. The border, the curved corners, the gradient, the shadow and the movement.

First I added the parts I was already familar with.

#more-button {
    background: #D58FD7;
    border: 1px solid;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px;
    padding: 5px 15px;
}

Most of those are either familiar to you or self explanatory. Box-shadow can be a pain, but there are tools like http://css3generator.com/ that are really helpful. Personally I like to use Chrome's built in development tools (hit F12). They allow you to change CSS properties on an element and see the results in the browser immediately. Once you get that element looking right the CSS can be copied and pasted back to your source. No doubt there is a better way to do this, but I am a trial and error kind of guy when it comes to design.

You'll also need CSS for when the button is clicked (so it looks like it's being pressed).

#more-button:active {
    position: relative;
    box-shadow: none;
    top: 2px;
    left: 2px;
}

Here we move the element down and to the right 2 pixels when it is clicked (active means when it's clicked). We must also specify box-shadow:none to remove the shadow, otherwise the button and it's shadow moves down and to the right. I wanted it to appear as though the button is pushed down onto the page, thus eliminating the shadow it cast. If you are a trial and error kind of person, feel free to experiment (that's the fun part right?).

Those three bits of code will get you a basic hovering button, all that's left now is the gradient. There are plenty of tools on the web to do this part for you. As there should be too, because it's a lot of numbers.

http://www.colorzilla.com/gradient-editor/
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

I actually ended up using the one from Microsoft, which I was pleased to see had support for all major browsers. Pick a couple of colors for the button, copy and paste that to into #more-button in the CSS file, then swap the colors to create the opposite gradient, copy and paste that into #more-button:active part and you should see results rather similar to what I came up with.

Here is the final CSS for my purple button.

#more-button {
    border: 1px solid;
    border-radius: 5px;
    background: #D58FD7;
    box-shadow: 2px 2px 5px 0px;
    padding: 5px 15px;

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(bottom, #F6BDFF 0%, #85668A 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(bottom, #F6BDFF 0%, #85668A 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(bottom, #F6BDFF 0%, #85668A 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F6BDFF), color-stop(1, #85668A));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #F6BDFF 0%, #85668A 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to top, #F6BDFF 0%, #85668A 100%);
}


#more-button:active {
    position: relative;
    box-shadow: none;
    top: 2px;
    left: 2px;

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #F6BDFF 0%, #85668A 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #F6BDFF 0%, #85668A 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #F6BDFF 0%, #85668A 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F6BDFF), color-stop(1, #85668A));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #F6BDFF 0%, #85668A 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #F6BDFF 0%, #85668A 100%);
}

The CSS for the gradient ends up adding a lot so that is supports every browser (aren't there standards for this?), but since all we have to do is pick colors the copy and paste it's not too bad.

This is down and dirty, I don't even know if it's worthy of being called a tutorial. This post is as much for me as for anyone else. Regardless, if this helps I encourage any readers to share anything they found useful or added to make it better.

After thought: Months later I just happen to come across my button in IE. I know it doesn't work right in IE, but you'd think at least the gradient would show up. I did, after all, use a tool from Microsoft to produce that part of the code.