By
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!
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.
