CSS3 and HTML5 have brought many great features to web design that have made development quicker and easier. With HTML5 introducing more elements, we can save time have to designate and create new classes and ID’s. With CSS3 animations, we do not have to rely on complex Javascripts to animate our elements. In this tutorial we will look at some modern CSS3 button trends that will help with designing your website.

css3-buttons

The Markup

We’ll start by writing out the HTML markup. We will create six different buttons with a :hover and :active state. We will wrap the <button> in the link <a> tag. This will make the whole button clickable.

We kept this example simple by containing our buttons within a <section> tag and can control the spacing of each button by changing the properties within the <p> tag.

CSS3

Now that we have our markup we can start styling our code with some CSS. First we will need to reset some properties so our buttons will be easier to work with

You may be unfamiliar with some of the values used in the coding. Here is a brief overview:

The “*” – The * targets every element in the HTML language. Since we will also be using the :before and :after pseudo class we must specify the *:before and *:after as well to add the same values as well.

box-sizing: border-box – Box-sizing lets you adjust the origin of the padding and the margin. By default the Padding and Margin are contained inside of a element but by using the border-box value we can adjust the Padding and Margin on the outside of an element.

em – We use em as a value, not like the typical <em> tag. 1 em is equal to the current font size, so if your font size is 12pt then 1 em equals 12pt etc.

Next we will set up a standard style button to work off of.

We’ve placed transitions to add a subtle animation that will give our buttons some nice added effects. You can adjust the speed of the animation but changing the seconds. Most button animations look better when they are fast and clean since the user spends very little time viewing the button animation once it is clicked. If you would like to change the default color of your button or have more than one colored button, you can make the changes on the .btn-blue class or duplicate the class and change the name (ex. for a red button copy the class and change to .btn-red and change the background-color to red).

Button A

Button A is a standard effect mimicking the animation of a button being pushed in once clicked.

Button B

Button B has a more dramatic click effect by moving up on hover and a more noticeable animation when clicked.

Button C

Button C mimics the the shrinking effect by adding a larger border-radius when clicked.

Button D

Button D is similar to the popular capsule button with a noticeable animation.

Button Yes

This is a more of a circular button that will work best if you have multiple buttons in one row.

Button No

This circle button has a more exaggerated animation.

Wrapping it Up

By using simple values as border-radius, :hover, :active we are able to create very unique and stylized buttons. You can get more creative by adding borders, text-shadows, and gradients to your buttons to give it more personality and style. Try it out and find out which one works best for your website.

Download Source Files