<div class="wrapper">
<div class="container">
<button>It’s Business Time</button>
</div>
</div>
@import "bourbon";
$primary: #59CD9D;
$duration: 2200ms;
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
font-family: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, Sans-serif;
text-align: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
padding: 1em 0 1em;
padding: 30px;
margin: 0 auto;
}
button {
background-color: $primary;
border: none;
border-radius: 3px;
color: #fff;
padding: 1rem 1.6rem;
font-size: 22px;
font-weight: 600;
letter-spacing: .03em;
position: relative;
@include animation(button-bounce $duration forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1));
@include transition(background-color .3s ease);
&:hover {
background-color: lighten($primary, 8%);
}
&:focus {
outline: none;
}
/*&:before */
&:after {
background-color: $primary;
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border-radius: 5px;
@include animation(button-blip $duration forwards infinite $ease-out-cubic);
}
/*&:hover:before,*/
&:hover:after {
border-color: transparent;
}
}
@include keyframes(button-bounce) {
0% {
transform: scale(1);
}
10% {
transform: scale(.96);
}
20% {
transform: scale(1.04);
}
52%,
100% {
transform: scale(1);
}
}
@include keyframes(button-blip) {
0% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
10% {
transform: scaleX(1) scaleY(1);
opacity: .7;
}
30%,
99% {
transform: scaleX(1.08) scaleY(1.35);
opacity: 0;
}
100% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
}
Also see: Tab Triggers