Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/animated-button-hover-effect.markdown

Created March 22, 2017 23:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/4549fa45ff9104b2570ce491f654d194 to your computer and use it in GitHub Desktop.
Save CodeMyUI/4549fa45ff9104b2570ce491f654d194 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Button Hover Effect
Raw
index.html
<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>
Raw
style.scss
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);
}
}
}
Raw
styles
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment