Animated Button Hover Effect
A Pen by Colette Wilson on CodePen.
<body> | |
<div class="row"> | |
<div class="large-12 columns"> | |
<div class="wrapper"> | |
<div class="btn btn--border btn--primary btn--animated">View case study</div> | |
</div> | |
</div> | |
</div> | |
</body> |
body { | |
position: relative; | |
font-family: sans-serif; | |
font-size: 14px; | |
} | |
.wrapper { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.btn { | |
position: relative; | |
display: inline-block; | |
letter-spacing: 1.2px; | |
padding: 12px 32px; | |
text-align: center; | |
text-transform: uppercase; | |
overflow: hidden; | |
z-index: 1; | |
cursor: pointer; | |
&:focus { | |
outline: none; | |
} | |
} | |
.btn--primary { | |
color: lightslategray; | |
} | |
.btn--border { | |
border-width: 1px; | |
border-style: solid; | |
border-radius: 10px; | |
box-sizing: border-box; | |
} | |
.btn--animated { | |
transition-property: color; | |
transition-duration: 0.5s; | |
&.btn--border.btn--primary { | |
border: 1px solid lightslategray; | |
} | |
&:before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: lightslategray; | |
transform: scaleX(0); | |
transform-origin: 0 50%; | |
transition-property: transform; | |
transition-duration: 0.5s; | |
transition-timing-function: ease-out; | |
z-index: -1; | |
} | |
&:hover { | |
color: white; | |
&:before { | |
transform: scaleX(1); | |
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66); | |
} | |
} | |
} |
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" /> |