//Modelo botão gelatinoso
/* Vars */

$color-bg: #f9f;
$color-btn: #D98FF2;
$color-btn-active: #56A66F;
$margin-btn: 2em;
$font-type: Arial;

/* Mixins */
@mixin fontsize($size: 24, $base: 16){
	font-size: $size + px;
	font-size: ($size/$base) * 1rem;
}
@mixin transition-timming-function($timming){
	-webkit-transition-timming-function: $timming;
	-moz-transition-timming-function: $timming;
	-o-transition-timming-function: $timming;
	transition-timming-function: $timming;
}
@mixin animation($animation){
	-webkit-animation: $animation;
	-moz-animation: $animation;
	-o-animation: $animation;
	animation: $animation;
}

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

/* Body */

/* Button */

a.btn{
	display: inline-block;
	margin: $margin-btn;
	padding: .6em;
	font-family: $font-type;
	@include fontsize(26);
	text-decoration: none;
	outline: none;
	color: #f6f;
	border-radius: 3px;
	background-color: $color-btn;
	box-shadow: 0 0 0 -2px $color-bg, 0 0 0 -1px $color-btn;
	border: none;
	-webkit-transtion: -webkit-box-shadow .3s;
	transition: box-shadow .3s;
	&:hover, &:focus{
		box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken($color-btn, 5%);
		@include transition-timming-function(cubic-bezier(.6, 4, .3, .8));
		@include animation(gelatine .5s 1);
	}
}

/* Keyframes. */

@keyframes gelatine{
	from, to{
		-webkit-transform: scale(1,1);
		transform: scale(1,1)
	}
	25%{
		-webkit-transform: scale(.9,1.2);
		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)
	}
}