This tutorial contains to know how to make an animated button with shadow on hover. You can learn and use this codes to your project.
Demo
Hover over the button
Let's Start Coding
Step 1 : Add HTML
HTML
<!DOCTYPE html>
<html>
<head>
<body>
</html>
<html>
<head>
<title> Shadow Button </title>
</head> <body>
<button class="btn_shadow">Click</button>
</body> </html>
Step 2 : Add CSS
CSS
body {
button {
.btn_shadow {
.btn_shadow:hover {
background : #eee;
font-family : tahoma;
} font-family : tahoma;
button {
background : none;
border : none;
outline : none;
cursor : pointer;
} border : none;
outline : none;
cursor : pointer;
.btn_shadow {
font-size : 20px;
display : inline-block;
padding : 5px 20px;
color : #444;
border : 2px solid #444;
box-shadow : 5px 5px 0 #444, -5px -5px 0 #444, -5px 5px 0 #444, 5px -5px 0 #444;
transition : 0.5s ease-in-out;
} display : inline-block;
padding : 5px 20px;
color : #444;
border : 2px solid #444;
box-shadow : 5px 5px 0 #444, -5px -5px 0 #444, -5px 5px 0 #444, 5px -5px 0 #444;
transition : 0.5s ease-in-out;
.btn_shadow:hover {
color : #00ccff;
border-color : #00ccff;
box-shadow : 20px 5px 0 #00ccff, -20px -5px 0 #00ccff;
}
border-color : #00ccff;
box-shadow : 20px 5px 0 #00ccff, -20px -5px 0 #00ccff;
Browse my all Front End Designs to learn and use on your project to make it more functional.