News

Animate buttons with CSS

Using the transform property, we’ll create some cool-looking 3D buttons that will add that extra polish to your site

3dbuttons

3dbuttons

CSS3 transform has been doing the rounds for quite some time. Browsers like Firefox, Chrome and Opera have full support for CSS3 2D and 3D transform techniques. Along with transform, we also have another cool property called perspective.

The perspective property defines the intensity of the 3D effect. This is because it defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value. But one thing we need to remember is, when defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself. When the transform and perspective properties are combined, you can create some great-looking 3D animations on a number of different elements.

In this tutorial we’re going to work with the transform and perspective properties and their values to create four cool-looking 3D buttons that you can use on your webpages. Each button will be slightly different in its perspective, which will allow us to really get to know how the perspective property works. So, open up your favourite text editor and let’s get started!

DOWNLOAD TUTORIAL FILES

Get ahead

After creating a new HTML5 file, open it up within your favourite text editor and add in the head section. We will need to add in the link to our CSS file and make sure we have good browser support for our HTML5 and CSS3 – so we will use Modernizr. Head over to modernizr.com and grab the latest version.

001    <!DOCTYPE html>
002    <html lang=”en” class=”no-js”>
003    <head>
004        <meta charset=”UTF-8” />
005        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”> 
006        <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
007        <title>Creative 3D Buttons</title>
008        <link rel=”stylesheet” type=” text/css” href=”css/main.css” />
009        <script src=”js/modernizr.custom.js”> </script>
010    </head>

Content body

With the head section done, we can now move on and start adding some HTML within the <body> section. As always, we are going to add in a container element with a class name of ‘container’ to allow us to centre things easily. Then, we will use the ‘<section>’ element and give it a class name of ‘3D-buttons’.

001    <body>
002        <div class=”container”>
003    <section class=”3d-buttons”>
004    </section>
005    </div><!-- END container -->
006    </body>
007    </html>

Button HTML

Within the ‘<section>’ element, we add in a paragraph tag with a class name of ‘btn_perspective’, which we’ll target later using the perspective CSS3 attribute. We then add in our first button, which will contain several class names that we’ll target later on.

001    <body>
002    <div class=”container”>
003    <section class=”3d-buttons”>
004    <p class=”btn_perspective”>
005    <button class=”btn btn-3d btn-3da”>Submit</button>
006    </p>
007    </section>
008    </div><!-- END container 
009    </body>
010    </html>

Finish up the HTML

We already have the HTML for one button, but we want to create another three so we can really test out our 3D skills. So, copy and paste the paragraph tag we created in the last step and make sure the last class name is changed accordingly.

001    <body>
002    <div class=”container”>
003    <section class=”3d-buttons”>
004    <h2>Creative 3D buttons</h2>
005    <p class=”btn_perspective”>
006    <button class=”btn btn-3d btn-3da”>Submit</button>
007    </p>
008    <p class=”btn_perspective”>
009    <button class=”btn btn-3d btn-3db”>Submit</button>
010    </p>
011    <br />
012    <p class=”btn_perspective”>
013    <button class=”btn btn-3d btn-3dc”>Submit</button>
014    </p>
015    <p class=”btn_perspective”>
016    <button class=”btn btn-3d btn-3dd”>Submit</button>
017    </p>
018    </section>
019    </div><!-- END container -->
020    </body>
021    </html>

The CSS

It’s important to start every project with some default CSS that we often add to an external CSS reset file. For this tutorial we’ll just keep it simple and go ahead and add some CSS to the top of a file called ‘main.css’, and with this CSS we are making sure our box model is set properly to every single element that uses the box model (css-tricks.com/box-sizing).

001    *, *:after, *:before { 
002    -webkit-box-sizing: border-box; 
003    -moz-box-sizing: border-box; 
004    box-sizing: border-box; 
005    }
006    body, html { 
007    font-size: 100%; 
008    padding: 0; 
009    margin: 0; 
010    height: 100%;
011    }
012    

Body styles

Next we need to add in some default styles for our body and links. This is not vital but makes things nice and simple as it keeps it all in one place. The background colour is going to be a nice light blue and we’re going to stick to using Arial as our main font.

001    body {
002    font-family: Arial, sans-serif;
003    background: #0e83cd;
004    }
005    a {
006    color: #888;
007    text-decoration: none;
008    }
009    a:hover,
010    a:active {
011    color: #333;
012    }
013    

Contain it

Now we need to create a container that wraps around our content. We’re going to set the height of the outer container to 100% and position it relative. Then we use a child combinator selector (>) to target our <section> element and centre everything within and add some other default styles.

001    .container {
002        height: 100%;
003        position: relative;
004    }
005    .container > section {
006        margin: 0 auto;
007        padding: 6em 3em;
008        text-align: center;
009        color: #fff;
010    }

Heading styles

What would a page be without a page title? Let’s add some styles to that. We’re going to keep it simple and make the text white with a 20px margin all around. Then we align it centre and make it uppercase. All nice and straightforward – so let’s move on to the buttons.

001    h2 {
002        color: #fff;
003        margin: 20px;
004        text-align: center;
005        text-transform: uppercase;
006    }
007    

Button styles

The idea is to give our buttons that flat look, which can easily be achieved by not adding any rounded corners or drop shadows. We will make sure they are fairly large so we can clearly see the 3D effect once we are finished and, as they are buttons, let’s not forget to add the ‘cursor: pointer’ at the bottom of our rule.

001    /* General button styles */
002    .btn {
003        border: none;
004        position: relative;
005        background: none;
006        padding: 28px 90px;
007        display: inline-block;
008        text-transform: uppercase;
009        margin: 15px 30px;
010        color: inherit;
011        letter-spacing: 2px;
012        font-size: .9em;
013        outline: none;
014        -moz-transition: all 0.4s;
015        -webkit-transition: all 0.4s;
016        transition: all 0.4s;
017        cursor: pointer;
018    }

Button pseudo

Using the ‘:after’ pseudo-element, we will make sure any content behind our button is taken out by using the ‘content:’ property. We then ensure that everything is positioned absolute so we can then set its index to ‘-1’, with everything else behind.

001    .btn:after {
002        content: ‘’;
003        position: absolute;
004        z-index: -1;
005        -webkit-transition: all 0.4s;
006        -moz-transition: all 0.4s;
007        transition: all 0.4s;
008    }

Button perspective

The ‘perspective:’ CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user. The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect is. The greater the value, the more subtle the effect will be.

001    /* Button */
002    .btn_perspective {
003        -webkit-perspective: 800px;
004        -moz-perspective: 800px;
005        perspective: 800px;
006        display: inline-block;
007    }

Button 3D

The ‘transform-style’ property will determine whether that element is in 3D space or is flattened. Of course we want it to be in 3D, so we add the ‘preserve-3d’ value to bring the button into 3D space and not be flattened (which is the default).

001    .btn-3d {
002        display: block;
003        background: #5cbcf6;
004        outline: 1px solid transparent;
005        transform-style: preserve-3d;
006    }
007    .btn-3d:active {
008        background: #55b7f3;
009    }

3D animation

Here we add our first 3D animation to our first button (a) and set some other styles. The ‘transform-origin’ property sets the point of origin of a transform; the first value is the horizontal position, the second is the vertical position. We rotate the ‘x’ plane to 90 degrees.

001    .btn-3da:after {
002        width: 100%;
003        height: 42%; 
004        left: 0;
005        top: -40%;
006        background: #53a6d7;
007        transform-origin: 0% 100%;
008        transform: rotateX(90deg);
010    }

Hover state

Now this is where the magic happens. We are going to rotate the whole button when we hover over it, making the rotate quite big so that we can see the 3D effect more prominently. To do that we add a -45 degree tilt to the button on the ‘x’ plane.

001    .btn-3da:hover {
002        transform: rotateX(-45deg);
003    }

Button B

The next button (button B) will be using similar styles as our first button, but with a few changes. First we make sure that the button is positioned 100% to the top and origin values both set to 0%. Then we just need to rotate this -90 degrees.

001    /* Button 3db */
002    .btn-3db:after {
003        width: 100%;
004        height: 40%;
005        left: 0;
006        top: 100%;
007        background: #53a6d7;
008        transform-origin: 0% 0%;
009        transform: rotateX(-90deg);
010    }

Hover state B

Now we have our first button animated in all its glory, we just need to use the same property on this one. To give us some variation, we will not make this as deep as the first button, so we give the rotateX property a value of just 35 degrees.

001    .btn-3db:hover {
002        transform: rotateX(35deg);
003    }

Button C styles

Here we continue on to our next button and add some slightly different styles. The thing to note here is that the origin is now set to 100% at the top and we are rotating the ‘Y’ axis, not the ‘X’. Also, to make sure we are targeting all browsers, we’ve added the browser prefixes to this rule (which you should do for the previous rules)

001    /* Button 3dc */
002    .btn-3dc:after {003        width: 20%;
004        height: 100%;
005        left: -20%;
006        top: 0;
007        background: #53a6d7;
008        -webkit-transform-origin: 100% 0%;
009        -webkit-transform: rotateY(-90deg);
010        -moz-transform-origin: 100% 0%;
011        -moz-transform: rotateY(-90deg);
012        -ms-transform-origin: 100% 0%;
013        -ms-transform: rotateY(-90deg);
014        transform-origin: 100% 0%;
015        transform: rotateY(-90deg);
016    }

C button animation

Let’s animate button C by using the same rule as before. This time we need to make sure we are rotating the ‘Y’ axis. Again, we’ll change things up a little by making this 3D effect less prominent by giving it a smaller value of 25 degrees.

001    .btn-3dc:hover {
002        transform: rotateY(25deg);
003    }

Finish up

Now we are almost done with our 3D buttons. All we need to do is add some styles to our last button. Again, there’s only some small adjustments in this rule, but we are staying on the ‘Y’ axis at a positive 90 degrees and our origin top and left is 0%.

001    /* Button 3dd */
002    .btn-3dd:after {
003        width: 20%;
004        height: 100%;
005        left: 100%;
006        top: 0;
007        background: #53a6d7;
008        -webkit-transform-origin: 0% 0%;
009        -webkit-transform: rotateY(90deg);
010        -moz-transform-origin: 0% 0%;
011        -moz-transform: rotateY(90deg);
012        -ms-transform-origin: 0% 0%;
013        -ms-transform: rotateY(90deg);
014        transform-origin: 0% 0%;
015        transform: rotateY(90deg);
016    }

Button D animation

Finally we will add in our animation for Button D. We are going to rotate this one on the ‘Y’ axis and again we will make this a lot less prominent than before by lowering the value to 15 degrees. We’ve also added in our browser prefixes too.

001    .btn-3dd:hover {
002        -webkit-transform: rotateY(-15deg);
003        -moz-transform: rotateY(-15deg);
004        -ms-transform: rotateY(-15deg);
005        transform: rotateY(-15deg);
006    }
007    

Responsiveness

It’s only natural that before we wrap this little project up, we think about making the buttons responsive. By default the buttons will fall underneath each other when the browser window is resized, but we want to think about making these buttons slightly bigger so that they are easily clickable using your finger. So, all we do is increase the font size as shown.

001    @media screen and (max-width:480px) {
002        .container {
003            font-size: 1.2em;
004        }
005    }

Final thoughts

Creating 3D buttons can really help enhance your web projects. Hopefully this tutorial has demonstrated that not only is it a fun thing to do, but it’s fairly straightforward to implement as well. A challenge for you now would be to try this technique to other elements on your page, such as vertical menus – it can look really great on logos, too.

×