This is one of the nice and beautiful button with 3d effect with onclick animation. It is very simple to create this types of buttons, Just follow the below css code you can able to understand.
The below image shows How this colorful animated 3d buttons looks. Here i given 6 types of colors with push animation on click the button, This example have the code and also demo page visit live demo page and check it how it was. It is really awesome you can use this types of animated buttons to your website to attract the customers or visitors.
Code for Css Animated 3d Button:
<html lang="en">
<head>
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<title>css animated 3d button</title>
<style>
body
{
margin-top:100px;
}
.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.on-click
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Russo One', sans-serif;
font-size: 21px;
color: #FFF;
text-decoration: none;
}
.color1
{
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
}
.color2
{
background-color:#c46cfb;
border-bottom: 5px solid #9c54c9;
text-shadow: 0px -2px #9c54c9;
}
.color3
{
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.color4
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.color5
{
background-color: #828280;
border-bottom: 5px solid #4a4a48;
text-shadow: 0px -2px #4a4a48;
}
.color6
{
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.on-click:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.cont
{
width:400px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="cont">
<h2 style="text-align:center;">Css Animated 3d Button</h2>
<a href="#" class="on-click shadow animate color1">Button1</a>
<a href="#" class="on-click shadow animate color2">Button2</a>
<a href="#" class="on-click shadow animate color3">Button3</a>
<a href="#" class="on-click shadow animate color4">Button4</a>
<a href="#" class="on-click shadow animate color5">Button5</a>
<a href="#" class="on-click shadow animate color6">Button6</a>
</div>
</body>
</html>
<head>
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<title>css animated 3d button</title>
<style>
body
{
margin-top:100px;
}
.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.on-click
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Russo One', sans-serif;
font-size: 21px;
color: #FFF;
text-decoration: none;
}
.color1
{
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
}
.color2
{
background-color:#c46cfb;
border-bottom: 5px solid #9c54c9;
text-shadow: 0px -2px #9c54c9;
}
.color3
{
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.color4
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.color5
{
background-color: #828280;
border-bottom: 5px solid #4a4a48;
text-shadow: 0px -2px #4a4a48;
}
.color6
{
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.on-click:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.cont
{
width:400px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="cont">
<h2 style="text-align:center;">Css Animated 3d Button</h2>
<a href="#" class="on-click shadow animate color1">Button1</a>
<a href="#" class="on-click shadow animate color2">Button2</a>
<a href="#" class="on-click shadow animate color3">Button3</a>
<a href="#" class="on-click shadow animate color4">Button4</a>
<a href="#" class="on-click shadow animate color5">Button5</a>
<a href="#" class="on-click shadow animate color6">Button6</a>
</div>
</body>
</html>
0 Comments