a 3D button with shadow info area appearence
A Pen by Jasper Chang on CodePen.
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<div class="button"> | |
<h3>Click Me</h3> | |
<span>Try<br/>IT</span> | |
</div> | |
</body> | |
</html> |
body { | |
background:#f9f9f9 repeat top left; | |
color: #333; | |
font-family: Georgia, Serif; | |
font-size: 13px; | |
} | |
.button h3 { | |
text-align: center; | |
position: relative; | |
top: 15px; | |
color: #FFF; | |
font-weight:bold; | |
} | |
.button { | |
width: 150px; | |
height: 50px; | |
background: #699DB6; | |
margin: 30px auto; | |
border-radius: 5px; | |
-webkit-border-radius: 5px; | |
-webkit-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.2); | |
-moz-border-radius: 5px; | |
-moz-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.2); | |
} | |
.button:hover { | |
background:-linear-gradient(right top, #699db6 0%, #54b6b5 99%,#e9e8ff 100%); | |
background:-webkit-linear-gradient(right top, #699db6 0%, #54b6b5 99%,#e9e8ff 100%); | |
background:-moz-linear-gradient(right top, #699db6 0%, #54b6b5 99%,#e9e8ff 100%); | |
-webkit-animation: showShadow 3s ease-in-out; | |
-moz-animation: showShadow 3s ease-in-out; | |
} | |
.button:active { | |
text-shadow:0 1px 0 #2E2; | |
-webkit-box-shadow: 0 1px #181, 1px 2px 2px rgba(0,0,0,0.3); | |
-moz-box-shadow: 0 1px #181, 1px 2px 2px rgba(0,0,0,0.3); | |
-webkit-transform: translateY(5px); | |
-moz-transform: translateY(5px); | |
} | |
span { | |
opacity: 0; | |
color: #FFF; | |
font-size: 15px; | |
font-weight:bold; | |
text-align: center; | |
position: relative; | |
top:-20px; | |
} | |
.button:hover span { | |
color: #ffff2f; | |
-webkit-animation: showSpan 3s ease-in-out; | |
-moz-animation: showSpan 3s ease-in-out; | |
} | |
/*Animation*/ | |
@-webkit-keyframes showSpan { | |
0% {left:140px;opacity:0;} | |
50% {left:160px;opacity:1;} | |
75% {opacity:0.5;} | |
100%{left:140px;opacity:0;} | |
} | |
@-webkit-keyframes showShadow { | |
0% {-webkit-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.2);-moz-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.2);} | |
50% {-webkit-box-shadow: 0px 4px 0 0 #568296, 45px 8px 10px rgba(0,0,0,0.5);-moz-box-shadow: 0px 4px 0 0 #568296, 3px 24px 10px rgba(0,0,0,0.5);} | |
100%{-webkit-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.5);-moz-box-shadow: 0px 4px 0 0 #568296, 3px 8px 10px rgba(0,0,0,0.5);} | |
} |