A simple animated Submit button using CSS, JS and jQuery.
Forked from Zach Cole's Pen Animated Submit Button.
Forked from Zach Cole's Pen Animated Submit Button.
A Pen by Alfonso Cabrera on CodePen.
<body> | |
<div class="button"> | |
<div class="submit"><h3>Submit</h3></div> | |
<div class="arrow"> | |
<div class="top line"></div> | |
<div class="bottom line"></div> | |
</div> | |
</div> | |
<p class="instructions">Hover and then click<p> | |
</body> |
function hover() { | |
$(".button").on("mouseenter", function() { | |
return $(this).addClass("hover"); | |
}); | |
} | |
function hoverOff() { | |
$(".button").on("mouseleave", function() { | |
return $(this).removeClass("hover"); | |
}); | |
} | |
function active() { | |
$(".button").on("click", function() { | |
return $(this).addClass("active"); | |
}); | |
} | |
hover(); | |
hoverOff(); | |
active(); |
@import url(http://fonts.googleapis.com/css?family=Raleway:800,400); | |
body { | |
margin: 0; | |
top: 0; | |
background: #B2EBF2; | |
} | |
h3 { | |
color: #fff; | |
font-family: Raleway, Helvetica, sans-serif; | |
font-size: 2rem; | |
font-weight: 400; | |
} | |
p { | |
color: #00BCD4; | |
font-family: Raleway, Helvetica, sans-serif; | |
font-size: 1.2rem; | |
font-weight: 400; | |
} | |
.button { | |
position: relative; | |
height: 60px; | |
width: 200px; | |
background: #00BCD4; | |
border-radius: 8px; | |
text-align: center; | |
margin: 200px auto 0 auto; | |
cursor: pointer; | |
overflow: hidden; | |
-webkit-transition: all 0.3s ease; | |
-moz-transition: all 0.3s ease; | |
transition: all 0.3s ease; | |
} | |
.submit, | |
.arrow { | |
display: inline-block; | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.2s ease; | |
transition: all 0.2s ease; | |
} | |
.submit { | |
text-transform: uppercase; | |
margin: 14px 0 0 26px; | |
} | |
.arrow { | |
position: relative; | |
top: -3px; | |
opacity: 0; | |
} | |
.line { | |
height: 3px; | |
width: 20px; | |
border-radius: 6px; | |
background: #fff; | |
} | |
.top { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
.bottom { | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
margin-top: 10px; | |
} | |
.instructions { | |
text-align: center; | |
margin: 20px auto; | |
} | |
.button:active { | |
-webkit-transform: scale(1.3); | |
-moz-transform: scale(1.3); | |
transform: scale(1.3); | |
} | |
.button.hover .submit { | |
-webkit-transform: translateX(-90px); | |
-moz-transform: translateX(-90px); | |
transform: translateX(-90px); | |
opacity: 0; | |
} | |
.button.hover .arrow { | |
-webkit-transform: translateX(-70px); | |
-moz-transform: translateX(-70px); | |
transform: translateX(-70px); | |
opacity: 1; | |
} | |
.button.active .arrow { | |
opacity: 1; | |
-webkit-transform: rotate(90deg) translateY(70px); | |
-moz-transform: rotate(90deg) translateY(70px); | |
transform: rotate(90deg) translateY(70px); | |
} | |
.button.active { | |
background: #4CAF50; | |
} | |
.button.active .submit { | |
opacity: 0; | |
} | |
.button.active .top { | |
width: 34px; | |
} | |
.button.active .bottom { | |
margin: 14px 0 0 12px; | |
} |