h1 Effect of gelatin on the button with sass

a(href="#" class="btn") Mousse here
a(href="#" class="btn btn-secondary") Mousse here
View Compiled
/**
 * $Variables 
 **/
$color-bg: #CFF09E !default;
$color-btn: #FE4365 !default;
$color-btn-secondary: #C8C8A9;
$color-btn-active: #4ECDC4 !default;

/**
 * $Mixins 
 **/
@mixin fontSize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
} /* http://www.sitepoint.com/sass-mixins-kickstart-project/ */

@mixin transition-timing-function($timing) {
    -webkit-transition-timing-function: $timing;
    -moz-transition-timing-function: $timing;
    -o-transition-timing-function: $timing;
    transition-timing-function: $timing;
}

@mixin animation($animation) {
	-webkit-animation: $animation;
  -moz-animation: $animation;
  -o-animation: $animation;
  animation: $animation;
}

@mixin transition-duration($duration) {
  -webkit-transition-duration: $duration;
  -moz-transition-duration: $duration;
  -o-transition-duration: $duration;
  transition-duration: $duration;
}

/* $Base */
 body {
   margin: 0 auto;
   padding-top: 60px;
   text-align: center;
   font-family: 'Ubuntu', sans-serif;
   @include fontSize(22);
   font-weight: 500;
   color: #333;
   background-color: $color-bg;
   
 }	
h1 {
  @include fontSize(38);
  font-style: italic;
  text-shadow: 1px 1px 0 #f2f2f2, 2px 2px 0 #f2f2f2;
}

/* $Button */
a.btn{
  display: inline-block;
  margin: 15px 15px 0;
  padding: .6em 1.1em;
  @include fontSize(26);
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: $color-btn;
  border-radius: 3px;
  box-shadow: 0 0 0 -2px $color-bg, 0 0 0 -1px $color-btn;
  border: none;
  -webkit-transition: -webkit-box-shadow .3s;
  transition:box-shadow .3s;
  &:hover, &:focus {
    box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken(#FF1D74, 5%);
    @include transition-timing-function(cubic-bezier(.6,4,.3,.8));
    @include animation (gelatine .5s 1);
  }
}

a.btn-secondary {
  background:$color-btn-secondary;
  box-shadow: 0 0 0 -2px $color-bg, 0 0 0 -1px $color-btn-secondary;
  &:hover {
    box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken($color-btn-secondary, 5%);
  }
}

a.btn:active,
a.btn-secondary:active  {
    background: $color-btn-active;
    @include transition-duration(0);
    box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken($color-btn-active, 5%);
  }

/**
 * $keyframes \ gelatine 
 **/
@keyframes gelatine{
  from,to{
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
  25%{
    -webkit-transform:scale(.9, 1.1);
    transform:scale(.9, 1.1)
  }
  50%{
    -webkit-transform:scale(1.1, .9);
    transform:scale(1.1, .9)
  }
  75%{
    -webkit-transform:scale(.95, 1.05);
    transform:scale(.95, 1.05)
  }
  from,to{
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
  25%{
    -webkit-transform:scale(.9, 1.1);
    transform:scale(.9, 1.1)
  }
  50%{
    -webkit-transform:scale(1.1, .9);
    transform:scale(1.1, .9)
  }75%{
    -webkit-transform:scale(.95, 1.05);
    transform:scale(.95, 1.05)
  }
}

@-webkit-keyframes gelatine{
  from,to{
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
  25%{
    -webkit-transform:scale(.9, 1.1);
    transform:scale(.9, 1.1)
  }
  50%{
    -webkit-transform:scale(1.1, .9);
    transform:scale(1.1, .9)
  }
  75%{
    -webkit-transform:scale(.95, 1.05);
    transform:scale(.95, 1.05)
  }
  from,to{
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
  25%{
    -webkit-transform:scale(.9, 1.1);
    transform:scale(.9, 1.1)
  }
  50%{
    -webkit-transform:scale(1.1, .9);
    transform:scale(1.1, .9)
  }75%{
    -webkit-transform:scale(.95, 1.05);
    transform:scale(.95, 1.05)
  }
}

View Compiled
// Gelatin over button effect with Sass

// Author Joël Lesenne <https://joellesenne.dev>
Run Pen

External CSS

  1. https://codepen.io/joellesenne/pen/pdMPdW

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/joellesenne/pen/pdMPdW