Button Animation Experiment - Dribbble

Button Animation Experiment - Dribbble.markdown

Button Animation Experiment - Dribbble

Another quick pen of button animation based on a Dribbble post I liked by Daniel Jecha - https://dribbble.com/shots/2741994-Button-Experiment

A Pen by Valentine on CodePen.

License.

index.html

<div class="flex">
  <a href="#0" class="bttn">More</a>
</div>

script.js

// Pen based on Dribbble shot by Daniel Jecha
// https://dribbble.com/shots/2741994-Button-Experiment

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

@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;
    }
  }
}