Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button Animation Experiment - Dribbble
<div class="flex">
<a href="#0" class="bttn">More</a>
</div>
// Pen based on Dribbble shot by Daniel Jecha
// https://dribbble.com/shots/2741994-Button-Experiment
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';
$font:'Source Sans Pro', sans-serif;
$primary:#B15947;
$secondary:#f1481b;
$animation:0.3s all ease;
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
color:#333;
text-decoration:none;
transition:$animation;
&:hover {
color:$primary;
}
&:focus {
text-decoration:none;
}
&:active {
color:#FFF;
}
}
body {
padding:0px 20px;
margin:0;
font-family:$font;
background: #F4F5EE;
-webkit-font-smoothing: antialiased;
}
.flex {
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.bttn {
width:100px;
height:100px;
line-height:100px;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-weight:bold;
position:relative;
&:after {
transition:$animation;
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
border-radius:3px;
border:3px solid $primary;
}
&:before {
content:'';
position:absolute;
border-radius:3px;
left:0;
top:0;
bottom:0;
right:0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background:#fff;
z-index:-1;
}
&:hover {
&:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&:active {
-webkit-transform:scale(1.1);
transform:scale(1.1);
&:before {
background-color:$secondary;
}
&:after {
border-color:$secondary;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment