In this tutorial, I’m going to run through the basics of 4 different style buttons – flat, border, gradient & shadow (skeuomorphic), and press style buttons. I’ll reset all the CSS so that buttons display consistently across devices, and I’ll style each set of buttons with a :hover and :active state. Without further ado, let’s dig into the HTML.
Get SourceView Demo
Getting Started with the HTML
The HTML I’m using is straightforward. I have four sections, each with their own class, that will allow me to target the buttons inside that section. Of course, if you want to target all or specific buttons on your site, then adjust accordingly by adding classes to specific buttons, or not adding classes at all. I also added .hover and .active classes to some of the buttons, so that you can see what they look like in all three states in the demo without actually hovering and pressing. Here’s my HTML set up:
The CSS For All Buttons
Different browsers handle default styling of buttons differently. The following CSS resets all the styles, and adds some defaults (that you can adjust). We’re going to get rid of any default shadows, border-radiuses, appearances, and outlines. Here’s what the CSS looks like:
Easy enough. Now let’s dig into each of our button styles. Note: I didn’t prefix any of my CSS properties for the sake of simplicity. To ensure as much cross browser uniformness as possible, prefix your necessary styles accordingly.
1) Flat Style CSS Buttons
Flat style buttons are very popular these days, and directly in line with the flat-design trends that are everywhere. Buttons in the past tended to stand out a bit more, but people are accustomed to flat buttons these days, and these style buttons work just fine. Just make sure you line them up in areas where users would expect to find a button. Here’s an image of this CSS button in its normal, hover, and active states.
The CSS for this is fairly straightforward. We get rid of the border, add a background colour and a text shadow. The hover and active states are indicated by a slightly darker background colour and text shadow. Here’s the CSS:
2) Border Style CSS Buttons
Border style buttons are in the same class as flat buttons. The only difference is that instead of using a background colour, we’ll use a border instead. Here’s an image of this CSS button in its normal, hover, and active states.
Once again, the CSS is fairly straightforward, and we’ll just be targeting the border colour and text colour. Each of these two properties gets a bit darker on hover and active. Here’s the CSS:
3) Gradient & Shadow Style CSS Buttons (Skeumorphic)
These buttons are more in line with what we’re accustomed to seeing in the days gone by. If those multicoloured gradient/shadow style buttons are suited to your project’s style, then these are for you. The best thing is that it’s all done with CSS, so can easily be scaled up or down without resolution loss, or having to create new images. Here’s an image of this CSS button in its normal, hover, and active states.
The CSS for this style makes use of gradients and shadows. On hover, a shadow will appear around the button, and on active, the shadow will be inset to give it a “pressed” look. Flat background colours will serve as the fallback for browsers that lack gradient support, and the shadow of course is just embellishment. Here’s the CSS:
4) Press Style CSS Buttons
These “press” style buttons combine a bit of flat design and skeuomorphism, giving the user the feeling that they actually pressed the button. It seemingly sinks into the page when the user pressed it. Here’s an image of this CSS button in its normal, hover, and active states.
The CSS here is slightly more complicated than the previous demos, and requires a little bit of math. But it’s still very easy to grasp. We style our button initially with an un-blurred box shadow to give it a 3D pop out look. On hover, the background colour gets a bit darker. When the button is pressed, the shadow gets smaller, and we will apply a CSS3 transform (translateY) downward equal to the difference in the box shadow normal and active values. Sounds a lot more complicated than it is, but take a look at the CSS and you’ll have a clearer understanding. Here it is:
Wrapping Up
And there you go! Stylish, elegant, and funky CSS buttons for all your needs. They are highly customisable, scalable, and easy to use. There are some basic CSS media queries in the source folder, but you might want to use your own sizing/media queries in your project. Don’t forget, you can download the source or view the demo by clicking the links below. Thanks for reading, and feel free to leave any comments, suggestions, or opinions below!
Get SourceView Demo
The post How to Create Stylish CSS Buttons appeared first on Speckyboy Design Magazine.