<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>@import url(https://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;
}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();
External CSS
This Pen doesn't use any external CSS resources.