CSS3 becomes more and more popular now these days, It’s great combination with HTML5 helps to create incredible designs. But when we talking about the cross browser compatibility then the IE8 and below versions of IE is really a big challenge for designers. Well my this article is about to create effective and impressive 3D button with CSS3.
You don’t need to use any photo-shop or image editor software to create a 3D button for latest browsers. Because CSS3 has the ability to create the web graphics or web stuff like 3D buttons, animations, gradients effect etc. With the use of :active selector you can also animate the 3D button.
Let’s take an example; In this example we create the two different kinds of 3D button with a bit animation but all this happens only with pure CSS3, no need to use jQuery or JavaScript. First of all lets create some HTML on which we have to implement our CSS effect.
<div id="buttons-container"><input class="button1" type="button" name="" value="Button 1" /> <input class="button2" type="button" name="" value="Button 2" /></div>
On the above HTML codes we took two input fields with type button. And apply two different class on both fields, So that we can easily distinguish our CSS style and effect. Now let’s turn on the CSS side, because now we have to beautify our buttons and implement the :active selector on both fields, because :active selector used to select and style to the active link. Here is the CSS part.
#buttons-container{
width: 400px;
margin: 10px auto;
border: 1px dashed #efefef;
padding: 10px;
}
.button1{
border: 1px solid #037EB4;
background: #00A0E4;
font-size: 16px;
padding: 5px 15px;
box-shadow: 0px 4px 0px #036793;
-o-box-shadow: 0px 4px 0px #036793;
-ms-box-shadow: 0px 4px 0px #036793;
-webkit-box-shadow: 0px 4px 0px #036793;
-moz-box-shadow: 0px 4px 0px #036793;
cursor: pointer;
font-family: 'Petit Formal Script', cursive;
font-weight: bold;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #ffffff;
text-shadow: 1px 2px 1px #036793;
-o-text-shadow: 1px 2px 1px #036793;
-webkit-text-shadow: 1px 2px 1px #036793;
-ms-text-shadow: 1px 2px 1px #036793;
-moz-text-shadow: 1px 2px 1px #036793;
}
.button2{
border: 1px solid #477D7D;
background: #63A8A5;
font-size: 16px;
padding: 5px 15px;
box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D, 2px 3px 1px #477D7D, 3px 3px 1px #477D7D, 4px 3px 1px #477D7D;
-o-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D, 2px 3px 1px #477D7D, 3px 3px 1px #477D7D, 4px 3px 1px #477D7D;
-webkit-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D, 2px 3px 1px #477D7D, 3px 3px 1px #477D7D, 4px 3px 1px #477D7D;
-moz-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D, 2px 3px 1px #477D7D, 3px 3px 1px #477D7D, 4px 3px 1px #477D7D;
cursor: pointer;
font-family: 'Petit Formal Script', cursive;
font-weight: bold;
color: #DEFFFF;
text-shadow: 1px 2px 1px #477D7D;
}
.button2:active{
position: relative;
top: 2px;
left: 2px;
box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D;
-o-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D;
-webkit-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D;
-ms-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D;
-moz-box-shadow: 0px 1px 1px #477D7D, 1px 0px 1px #477D7D, 1px 2px 1px #477D7D, 2px 2px 1px #477D7D;
}
.button1:active{
position: relative;
top: 2px;
box-shadow: 0px 2px 0px #036793;
-o-box-shadow: 0px 2px 0px #036793;
-ms-box-shadow: 0px 2px 0px #036793;
-moz-box-shadow: 0px 2px 0px #036793;
-webkit-box-shadow: 0px 2px 0px #036793;
}
Now we almost finished our work, have to take a look on the browser and also click on these buttons to check the moment of the active buttons as well. Hope you all enjoy this post. You are welcome to discuss through the comment section.