So, I wanted to try to do something sort of neat today, so I decided to tackle the problem of button styles with images. Primarily, I use photoshop to create cool looking buttons, then I use css sprites to make them functional within a theme. However, images are really only good if you are developing a site wherein you can predict all of the content that will go up on the site as well as what every button will need to say. For instance, on the front page of your site you may have a button that says “Get Started” or “Buy My Awesome Thing Now!”. Then on sub pages you would have normal buttons that say functional things such as “Next” and “Previous”. That’s where the rub is! If you were to make a website like that, you would need a tremendous amount of pre-fabricated buttons so that all of the bases would be covered.
So why Images?
Well… they are pretty, and you can use Photoshop to pull off some really impressive effects. (like noise patterns, that can add some texture to your work.)
So Why CSS?
CSS is functional and dynamic. Meaning that you could literally create a button that says anything that you would like, and using a few css rules, it would just work. I decided to work on prettying up a CSS3 button, and found a neat trick that effectively adds noise to the element without messing with the browser’s rendering. The effect is actually very subtle and could be easily styled with as many color schemes as you could think of. Check it out!