This tutorial will help you to create a 3D styled button for your website links. Along with the 3D look it will give you a glance of realistic pressable effect. If you are dying to see this then press the following demo button. The button has been created with the help of multiple
shades of colours, one after another. Finally I have applied an active and a focus effect to make the button pressable. This will help you proceed one step further in enhancing your website design. Because buttons and links are the crucial part of a webpage or a blog.
You can see the demo by pressing the following link
Necessary codes for making your link pressable 3D
1) Minimal html for this effect
shades of colours, one after another. Finally I have applied an active and a focus effect to make the button pressable. This will help you proceed one step further in enhancing your website design. Because buttons and links are the crucial part of a webpage or a blog.
You can see the demo by pressing the following link
Necessary codes for making your link pressable 3D
1) Minimal html for this effect
<html> <body> <a href="#">Press</a> </body> </html>2) The CSS for pressable button
a{
cursor: pointer; cursor: hand;
padding: 30px 60px 30px 60px;
position: relative;
top: 200px;
left: 500px;
font-size: 40px;
text-decoration: none;
font-family: Arial;
color: #2e2e2e;
text-align: center;
background-color: #5786c1;
-webkit-box-shadow:1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
6px 5px #3a587f, 5px 6px #4171ae,
7px 6px #3a587f, 6px 7px #4171ae,
8px 7px #3a587f, 7px 8px #4171ae,
9px 8px #3a587f, 8px 9px #4171ae;
-moz-box-shadow:1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
6px 5px #3a587f, 5px 6px #4171ae,
7px 6px #3a587f, 6px 7px #4171ae,
8px 7px #3a587f, 7px 8px #4171ae,
9px 8px #3a587f, 8px 9px #4171ae;
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
6px 5px #3a587f, 5px 6px #4171ae,
7px 6px #3a587f, 6px 7px #4171ae,
8px 7px #3a587f, 7px 8px #4171ae,
9px 8px #3a587f, 8px 9px #4171ae;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active, a:focus{
-webkit-box-shadow:1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae;
-moz-box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae;
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae,
0px 0px #3a587f, 0px 0px #4171ae;
position: relative;
top: 210px;
left:510px;
}
We are using -webkit-box-shadow and -moz-box-shadow for different browsers compatibilities. Though I am sharing this CSS, a prior idea on CSS basics is necessary. As for example as you are seeing I am using the relative position in the above CSS code, you must need to change this position value when you will be using this. That's why you need to learn how the CSS positioning works. Similarly others follow.