/* ==================== BASE STYLES ==================== */
*,
*:before,
*:after {
box-sizing: border-box;
box-sizing: inherit;
}
*:before,
*:after {
z-index: -1;
}
body,html {
margin: 0;
padding: 0;
background: #F1F1F1;
color: #212121;
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
.body-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: auto;
background: #232526; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 2.5%;
-webkit-transition: all 0.2s cubic-bezier(.4,0,0,1);
transition: all 0.2s cubic-bezier(.4,0,0,1);
}
.title-container {
width: 100%;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
margin: 30px auto;
padding-bottom: 20px;
background: url("diagonal-striped-brick.png"), #FAFAFA;
-webkit-background-clip: text;
font-size: 4em;
font-weight: bold;
color: transparent;
-webkit-transition: font-size 0.2s cubic-bezier(.4,0,0,1);
transition: font-size 0.2s cubic-bezier(.4,0,0,1);
border-bottom: 10px solid #009688;
}
.grid-container {
max-width: 90%;
width: 100%;
max-height: 90%;
height: auto;
background: #FAFAFA;
border-radius: 2px;
border-top: 1px solid rgba(33,33,33,0.24);
box-shadow: 0 1px 3px rgba(33,33,33,0.24), 0 1px 2px rgba(33,33,33,0.24);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
-webkit-transition: all 0.2s cubic-bezier(.4,0,0,1);
transition: all 0.2s cubic-bezier(.4,0,0,1);
}
.grid-col {
width: 100%;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0.8333% 0;
-webkit-transition: all 0.2s cubic-bezier(.4,0,0,1);
transition: all 0.2s cubic-bezier(.4,0,0,1);
}
.grid-item {
display: flex;
justify-content: center;
align-items: center;
width: 15%;
min-width: 10em;
height: 10em;
margin: 0.83333%;
background: url("diagonal-striped-brick.png"), #FAFAFA;
border-radius: 2px;
border-top: 1px solid rgba(33,33,33,0.24);
box-shadow: 0 1px 3px rgba(33,33,33,0.24), 0 1px 2px rgba(33,33,33,0.24);
-webkit-transition: all 0.2s cubic-bezier(.4,0,0,1);
transition: all 0.2s cubic-bezier(.4,0,0,1);
position: relative;
overflow: hidden;
transition: all 0.2s cubic-bezier(.4,0,0,1);
}
.grid-item:hover {
box-shadow: 0 8px 28px rgba(33,33,33,0.24), 0 8px 8px rgba(33,33,33,0.22);
}
.grid-item-dark {
background: #212121;
}
.creator-wrapper {
width: 100%;
height: 100px;
border-top: 10px solid #009688;
border-bottom: 10px solid #009688;
margin: 40px auto 20px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: url("diagonal-striped-brick.png"), #FAFAFA;
}
.creator-wrapper svg {
-webkit-transition: all 0.2s cubic-bezier(.4,0,0,1);
transition: all 0.2s cubic-bezier(.4,0,0,1);
}
.creator-wrapper:hover svg path {
fill:#EC407A;
}
.creator-wrapper span {
width: 100%;
color: #232526;
font-size: 1.5em;
}
.creator-wrapper span a {
color: #232526;
text-decoration: none;
}
.creator-wrapper:hover span a {
color: #EC407A;
}
.section-heading {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.section-heading h1 {
font-size: 2em;
color: #FAFAFA;
box-shadow: rgba(255, 255, 255, 0.07) 0 2px 0;
border-bottom: 2px solid #121212;
text-shadow: 0px 4px 2px rgba(33, 33, 33, 0.6);
}
/* ==================== Buttons ==================== */
.button {
width: 8em;
height: 3em;
outline: none;
padding: .25em;
display: block;
margin: .25em auto;
cursor: pointer;
font-size: 1.25em;
background-color: transparent;
position: relative;
border: 2px solid #232526;
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.6, 1);
color: #009688;
border-radius: 6px;
}
.circle-button {
width: 6em;
height: 6em;
outline: none;
padding: .25em;
display: block;
margin: .25em auto;
cursor: pointer;
font-size: 1.25em;
border: 2px solid #232526;
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.6, 1);
color: #009688;
border-radius: 50%;
}
.circle-nav {
width: 5em;
height: 5em;
outline: none;
padding: .25em;
display: block;
margin: .25em auto;
cursor: pointer;
font-size: 1.25em;
border: 4px solid #009688;
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.6, 1);
background-color: #232526;
color: #FAFAFA;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 1px 3px rgba(33,33,33,0.24), 0 1px 2px rgba(33,33,33,0.24);
}
.circle-nav:hover {
box-shadow: 0 8px 28px rgba(33,33,33,0.24), 0 8px 8px rgba(33,33,33,0.22);
}
.circle-nav span {
font-size: 24px;
}
/* ==================== ANIMATIONS ==================== */
/* ======================= Media Queries ======================= */
/* ============================================================= */
/* ===================== (max-width: 70em) ===================== */
/* ============================================================= */
@media all and (max-width: 70em) {
.body-wrapper {
height: auto;
}
.grid-container {
max-width: 96%;
height: auto;
}
.grid-col {
margin: 0 auto;
}
.grid-item {
width: 30%;
height: 8em;
margin: 0.83333%;
}
.title-container {
font-size: 3em;
}
}
/* ============================================================= */
/* ===================== (max-width: 75em) ===================== */
/* ============================================================= */
@media all and (max-width: 75em) {
.body-wrapper {
height: auto;
}
.grid-container {
max-width: 96%;
height: auto;
}
.grid-col {
height: auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid-col:nth-child(1) {
margin-top: 8px;
}
.grid-col:nth-child(4) {
margin-bottom: 8px;
}
.grid-item {
width: 25%;
height: 8em;
margin: 0.83333%;
}
.title-container {
font-size: 2em;
}
.section-heading h1 {
font-size: 1.5em;
}
}
/* ============================================================= */
/* ===================== (max-width: 35em) ===================== */
/* ============================================================= */
@media all and (max-width: 35em) {
.grid-item {
width: 45%;
height: 8em;
margin: 0.83333%;
}
}
/* ============================================================= */
/* ===================== (max-width: 25em) ===================== */
/* ============================================================= */
@media all and (max-width: 25em) {
.grid-item {
width: 85%;
height: 8em;
margin: 0.83333%;
}
}
/*
*
========== KEYFRAME ANIMATIONS |
*
*/
/* ---------- Top Bounce ---------- */
@keyframes topBounce {
0% {
transform: translateY(0%); }
10% {
transform: translateY(-95%); }
20% {
transform: translateY(-55%); }
30% {
transform: translateY(-95%); }
40% {
transform: translateY(-65%); }
50% {
transform: translateY(-95%); }
60% {
transform: translateY(-75%); }
70% {
transform: translateY(-95%); }
80% {
transform: translateY(-85%); }
90% {
transform: translateY(-95%); }
100% {
transform: translateY(-100%); } }
/* ---------- Bottom Bounce ---------- */
@keyframes bottomBounce {
0% {
transform: translateY(0%); }
10% {
transform: translateY(95%); }
20% {
transform: translateY(55%); }
30% {
transform: translateY(95%); }
40% {
transform: translateY(65%); }
50% {
transform: translateY(95%); }
60% {
transform: translateY(75%); }
70% {
transform: translateY(95%); }
80% {
transform: translateY(85%); }
90% {
transform: translateY(95%); }
100% {
transform: translateY(100%); } }
/* ---------- Bottom Bounce Short ---------- */
@keyframes bottomBounceShort {
0% {
transform: translateY(50%); }
10% {
transform: translateY(25%); }
20% {
transform: translateY(95%); }
30% {
transform: translateY(55%); }
40% {
transform: translateY(95%); }
50% {
transform: translateY(65%); }
60% {
transform: translateY(96%); }
70% {
transform: translateY(75%); }
80% {
transform: translateY(95%); }
90% {
transform: translateY(97.5%); }
100% {
transform: translateY(100%); } }
/* ---------- Bottom to Top ---------- */
@keyframes bottomToTop {
0% {
transform: translateY(0%); }
10% {
transform: translateY(50%); }
20% {
transform: translateY(75%); }
30% {
transform: translateY(100%); }
40% {
transform: translateY(50%); }
50% {
transform: translateY(25%); }
60% {
transform: translateY(0%); }
70% {
transform: translateY(-25%); }
80% {
transform: translateY(-50%); }
90% {
transform: translateY(-75%); }
100% {
transform: translateY(-100%); } }
/* ---------- Up to Left ---------- */
@keyframes upToLeft {
0% {
transform: translateY(0%); }
10% {
transform: translateY(-20%); }
20% {
transform: translateY(-40%); }
30% {
transform: translateY(-50%); }
40% {
transform: translateY(-50%); }
50% {
transform: translateY(-50%); }
60% {
transform: translateY(-50%) translateX(0%); }
70% {
transform: translateY(-50%) translateX(-25%); }
80% {
transform: translateY(-50%) translateX(-50%); }
90% {
transform: translateY(-50%) translateX(-75%); }
100% {
transform: translateY(-50%) translateX(-100%); } }
/* ---------- Up to Right ---------- */
@keyframes upToRight {
0% {
transform: translateY(0%); }
10% {
transform: translateY(-20%); }
20% {
transform: translateY(-40%); }
30% {
transform: translateY(-50%); }
40% {
transform: translateY(-50%); }
50% {
transform: translateY(-50%); }
60% {
transform: translateY(-50%) translateX(0%); }
70% {
transform: translateY(-50%) translateX(25%); }
80% {
transform: translateY(-50%) translateX(50%); }
90% {
transform: translateY(-50%) translateX(75%); }
100% {
transform: translateY(-50%) translateX(100%); } }
/* ---------- Down to Left ---------- */
@keyframes downToLeft {
0% {
transform: translateY(0%); }
10% {
transform: translateY(20%); }
20% {
transform: translateY(40%); }
30% {
transform: translateY(50%); }
40% {
transform: translateY(50%); }
50% {
transform: translateY(50%); }
60% {
transform: translateY(50%) translateX(0%); }
70% {
transform: translateY(50%) translateX(-25%); }
80% {
transform: translateY(50%) translateX(-50%); }
90% {
transform: translateY(50%) translateX(-75%); }
100% {
transform: translateY(50%) translateX(-100%); } }
/* ---------- Down to Right ---------- */
@keyframes downToRight {
0% {
transform: translateY(0%); }
10% {
transform: translateY(20%); }
20% {
transform: translateY(40%); }
30% {
transform: translateY(50%); }
40% {
transform: translateY(50%); }
50% {
transform: translateY(50%); }
60% {
transform: translateY(50%) translateX(0%); }
70% {
transform: translateY(50%) translateX(25%); }
80% {
transform: translateY(50%) translateX(50%); }
90% {
transform: translateY(50%) translateX(75%); }
100% {
transform: translateY(50%) translateX(100%); } }
/* ---------- Left Bounce ---------- */
@keyframes leftBounce {
0% {
transform: translateX(0%); }
10% {
transform: translateX(-95%); }
20% {
transform: translateX(-55%); }
30% {
transform: translateX(-95%); }
40% {
transform: translateX(-65%); }
50% {
transform: translateX(-95%); }
60% {
transform: translateX(-75%); }
70% {
transform: translateX(-95%); }
80% {
transform: translateX(-85%); }
90% {
transform: translateX(-95%); }
100% {
transform: translateX(-100%); } }
/* ---------- Right Bounce ---------- */
@keyframes rightBounce {
0% {
transform: translateX(0%); }
10% {
transform: translateX(95%); }
20% {
transform: translateX(55%); }
30% {
transform: translateX(95%); }
40% {
transform: translateX(65%); }
50% {
transform: translateX(95%); }
60% {
transform: translateX(75%); }
70% {
transform: translateX(95%); }
80% {
transform: translateX(85%); }
90% {
transform: translateX(95%); }
100% {
transform: translateX(100%); } }
/* ---------- Rumble ---------- */
@keyframes rumble {
0% {
transform: rotate(0deg); }
5% {
transform: rotate(5deg); }
10% {
transform: rotate(0deg); }
15% {
transform: rotate(-5deg); }
20% {
transform: rotate(0deg); }
25% {
transform: rotate(5deg); }
30% {
transform: rotate(0deg); }
35% {
transform: rotate(-5deg); }
40% {
transform: rotate(0deg); }
45% {
transform: rotate(5deg); }
50% {
transform: rotate(0deg); }
55% {
transform: rotate(-5deg); }
60% {
transform: rotate(0deg); }
65% {
transform: rotate(5deg); }
70% {
transform: rotate(0deg); }
75% {
transform: rotate(-5deg); }
80% {
transform: rotate(0deg); }
85% {
transform: rotate(5deg); }
90% {
transform: rotate(0deg); }
95% {
transform: rotate(-5deg); }
100% {
transform: rotate(0deg);
opacity: 0; } }
/* ---------- Squish Bounce One ---------- */
@keyframes squishBounceOne {
10% {
height: 1.5em;
width: 8.5em;
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px); }
20% {
width: 5.75em;
height: 2.25em;
transform: translateY(10px);
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-o-transform: translateY(10px);
-ms-transform: translateY(10px); }
30% {
width: 6em;
height: 3em;
transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg);
-moz-transform: rotateZ(15deg);
-o-transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg); }
40% {
width: 8em;
transform: rotateZ(-15deg);
-webkit-transform: rotateZ(-15deg);
-moz-transform: rotateZ(-15deg);
-o-transform: rotateZ(-15deg);
-ms-transform: rotateZ(-15deg); }
50% {
width: 7em;
height: 2.5em;
transform: rotateZ(10deg);
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg); }
60% {
width: 8em;
height: 3em;
transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg); }
70% {
width: 7.5em;
height: 2.8em;
transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg);
-moz-transform: rotateZ(5deg);
-o-transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg); }
80% {
width: 8em;
height: 3em;
transform: rotateZ(-5deg);
-webkit-transform: rotateZ(-5deg);
-moz-transform: rotateZ(-5deg);
-o-transform: rotateZ(-5deg);
-ms-transform: rotateZ(-5deg); }
90% {
transform: rotateZ(2.5deg);
-webkit-transform: rotateZ(2.5deg);
-moz-transform: rotateZ(2.5deg);
-o-transform: rotateZ(2.5deg);
-ms-transform: rotateZ(2.5deg); }
100% {
transform: rotateZ(-2.5deg);
-webkit-transform: rotateZ(-2.5deg);
-moz-transform: rotateZ(-2.5deg);
-o-transform: rotateZ(-2.5deg);
-ms-transform: rotateZ(-2.5deg); } }
/* ---------- Squish Bounce Two ---------- */
@keyframes squishBounceTwo {
10% {
height: 5em;
width: 3em;
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px); }
20% {
height: 2.25em;
width: 5.75em;
transform: translateY(10px);
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-o-transform: translateY(10px);
-ms-transform: translateY(10px); }
30% {
width: 4em;
height: 4em;
transform: rotateZ(10deg);
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg); }
40% {
width: 7em;
height: 3em;
transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg); }
50% {
width: 7em;
height: 2.5em;
transform: rotateZ(10deg);
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg); }
60% {
width: 8em;
height: 3em;
transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg); }
70% {
width: 7.5em;
height: 2.8em;
transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg);
-moz-transform: rotateZ(5deg);
-o-transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg); }
80% {
width: 8em;
height: 3em;
transform: rotateZ(-5deg);
-webkit-transform: rotateZ(-5deg);
-moz-transform: rotateZ(-5deg);
-o-transform: rotateZ(-5deg);
-ms-transform: rotateZ(-5deg); }
90% {
transform: rotateZ(2.5deg);
-webkit-transform: rotateZ(2.5deg);
-moz-transform: rotateZ(2.5deg);
-o-transform: rotateZ(2.5deg);
-ms-transform: rotateZ(2.5deg); }
100% {
transform: rotateZ(-2.5deg);
-webkit-transform: rotateZ(-2.5deg);
-moz-transform: rotateZ(-2.5deg);
-o-transform: rotateZ(-2.5deg);
-ms-transform: rotateZ(-2.5deg); } }
/* ---------- Click Ripple ---------- */
@keyframes clickRipple {
from {
opacity: 1;
transform: scale(0); }
to {
opacity: 0;
transform: scale(1); } }
/* ---------- Rotate Blink ---------- */
@keyframes rotateBlink {
10% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg); }
20% {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg); }
30% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
40% {
border-width: 12px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
50% {
border-width: 62px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
60% {
border-width: 12px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
70% {
border-width: 62px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
80% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
90% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg); } }
/* ---------- Ball Bounce ---------- */
@keyframes ballBounce {
10% {
width: 8em;
height: 4em;
transform: translateY(-35%);
-webkit-transform: translateY(-35%);
-moz-transform: translateY(-35%);
-o-transform: translateY(-35%);
-ms-transform: translateY(-35%); }
20% {
transform: translateY(15%);
-webkit-transform: translateY(15%);
-moz-transform: translateY(15%);
-o-transform: translateY(15%);
-ms-transform: translateY(15%); }
30% {
transform: translateY(15%);
-webkit-transform: translateY(15%);
-moz-transform: translateY(15%);
-o-transform: translateY(15%);
-ms-transform: translateY(15%); }
40% {
width: 5em;
height: 7em;
transform: translateY(-20%);
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-o-transform: translateY(-20%);
-ms-transform: translateY(-20%); }
50% {
width: 7.5em;
height: 4.5em;
transform: translateY(15%);
-webkit-transform: translateY(15%);
-moz-transform: translateY(15%);
-o-transform: translateY(15%);
-ms-transform: translateY(15%); }
60% {
width: 5.5em;
height: 6.5em;
transform: translateY(-16%);
-webkit-transform: translateY(-16%);
-moz-transform: translateY(-16%);
-o-transform: translateY(-16%);
-ms-transform: translateY(-16%); }
70% {
width: 7em;
height: 5em;
transform: translateY(10%);
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
-o-transform: translateY(10%);
-ms-transform: translateY(10%); }
80% {
width: 6em;
height: 6em;
transform: translateY(-10%);
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
-o-transform: translateY(-10%);
-ms-transform: translateY(-10%); }
90% {
transform: translateY(5%);
-webkit-transform: translateY(5%);
-moz-transform: translateY(5%);
-o-transform: translateY(5%);
-ms-transform: translateY(5%); }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0); } }
/* ---------- inOut ---------- */
@keyframes inOut {
0% {
box-shadow: 0 8px 28px rgba(33, 33, 33, 0.24), 0 8px 8px rgba(33, 33, 33, 0.22);
border-width: 4px; }
25% {
box-shadow: inset 0 2px 8px rgba(0, 150, 136, 0.4), 0 4px 16px rgba(33, 33, 33, 0.24), 0 4px 6px rgba(33, 33, 33, 0.24);
border-width: 5px; }
50% {
box-shadow: inset 0 4px 16px rgba(0, 150, 136, 0.3), 0 1px 3px rgba(33, 33, 33, 0.24), 0 1px 2px rgba(33, 33, 33, 0.24);
border-width: 6px; }
75% {
box-shadow: inset 0 2px 8px rgba(0, 150, 136, 0.4), 0 4px 16px rgba(33, 33, 33, 0.24), 0 4px 6px rgba(33, 33, 33, 0.24);
border-width: 5px; }
100% {
box-shadow: 0 8px 28px rgba(33, 33, 33, 0.24), 0 8px 8px rgba(33, 33, 33, 0.22);
border-width: 4px; } }
/* ---------- textInOut ---------- */
@keyframes textInOut {
0% {
font-size: 32px; }
25% {
font-size: 28px; }
50% {
font-size: 24px; }
75% {
font-size: 28px; }
100% {
font-size: 32px; } }
/* ---------- Slow Rotate ---------- */
@keyframes slowRotate {
0% {
transform: rotate(0deg); }
5% {
transform: rotate(45deg); }
10% {
transform: rotate(45deg); }
15% {
transform: rotate(90deg); }
20% {
transform: rotate(90deg); }
25% {
transform: rotate(90deg); }
30% {
transform: rotate(135deg); }
35% {
transform: rotate(135deg); }
40% {
transform: rotate(135deg); }
45% {
transform: rotate(180deg); }
50% {
transform: rotate(180deg); }
55% {
transform: rotate(180deg); }
60% {
transform: rotate(135deg); }
65% {
transform: rotate(135deg); }
70% {
transform: rotate(135deg); }
75% {
transform: rotate(90deg); }
80% {
transform: rotate(90deg); }
85% {
transform: rotate(90deg); }
90% {
transform: rotate(45deg); }
95% {
transform: rotate(45deg); }
100% {
transform: rotate(0deg); } }
/* ---------- Opacity Crank ---------- */
@keyframes opacityCrank {
0% {
background-color: #232526; }
5% {
background-color: #232526; }
10% {
background-color: rgba(35, 37, 38, 0.8); }
15% {
background-color: rgba(35, 37, 38, 0.6); }
20% {
background-color: rgba(35, 37, 38, 0.6); }
25% {
background-color: rgba(35, 37, 38, 0.6); }
30% {
background-color: rgba(35, 37, 38, 0.4); }
35% {
background-color: rgba(35, 37, 38, 0.4); }
40% {
background-color: rgba(35, 37, 38, 0.4); }
45% {
background-color: rgba(35, 37, 38, 0.2); }
50% {
background-color: rgba(35, 37, 38, 0.2); }
55% {
background-color: rgba(35, 37, 38, 0.2); }
60% {
background-color: rgba(35, 37, 38, 0.4); }
65% {
background-color: rgba(35, 37, 38, 0.4); }
70% {
background-color: rgba(35, 37, 38, 0.4); }
75% {
background-color: rgba(35, 37, 38, 0.6); }
80% {
background-color: rgba(35, 37, 38, 0.6); }
85% {
background-color: rgba(35, 37, 38, 0.6); }
90% {
background-color: rgba(35, 37, 38, 0.8); }
95% {
background-color: rgba(35, 37, 38, 0.8); }
100% {
background-color: #232526; } }
/* ---------- Border Bounce ---------- */
@keyframes borderBounce {
0% {
border-width: 4px; }
10% {
border-width: 12px; }
20% {
border-width: 1px; }
30% {
border-width: 10px; }
40% {
border-width: 2px; }
50% {
border-width: 8px; }
60% {
border-width: 3px; }
70% {
border-width: 6px; }
80% {
border-width: 3.5px; }
90% {
border-width: 5.5px; }
100% {
border-width: 4px; } }
/*
*
========== BUTTONS |
*
*/
/* ----- SLIDING BUTTONS ----- */
/* ----- Button #1 ----------- */
#button1 {
overflow: hidden; }
#button1 .btn-overlay {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -8em;
width: 100%;
left: 0;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button1:hover .btn-overlay {
top: 0; }
/* ----- Button #2 ----------- */
#button2 {
overflow: hidden; }
#button2 .btn-overlay {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button2:hover .btn-overlay {
left: 0; }
/* ----- Button #3 ----------- */
#button3 {
overflow: hidden; }
#button3 .btn-overlay {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button3:hover .btn-overlay {
right: 0; }
/* ----- Button #4 ----------- */
#button4 {
overflow: hidden; }
#button4 .btn-overlay {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
left: 0;
width: 100%;
background-color: #009688;
padding-top: .25em;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button4:hover .btn-overlay {
bottom: 0; }
/* ----- Button #5 ----------- */
#button5 {
overflow: hidden; }
#button5 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button5 .btn-overlay1 a {
position: absolute;
right: 0; }
#button5:hover .btn-overlay1 {
left: -3.85em; }
#button5 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button5 .btn-overlay2 a {
position: absolute;
left: 0; }
#button5:hover .btn-overlay2 {
right: -3.85em; }
/* ----- Button #6 ----------- */
#button6 {
overflow: hidden; }
#button6 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
left: 0;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button6 .btn-overlay1 a {
position: absolute;
bottom: 0; }
#button6:hover .btn-overlay1 {
top: -1.5em; }
#button6 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
right: 0;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button6 .btn-overlay2 a {
position: absolute;
top: 0; }
#button6:hover .btn-overlay2 {
bottom: -1.5em; }
/* ----- Button #7 ----------- */
#button7 {
overflow: hidden; }
#button7 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
left: 0;
width: 25.75%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button7:hover .btn-overlay1 {
top: 0em; }
#button7 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
left: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button7 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button7:hover .btn-overlay2 {
bottom: 0em; }
#button7 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
right: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button7 .btn-overlay3 a {
position: absolute;
left: 0; }
#button7:hover .btn-overlay3 {
top: 0em; }
#button7 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
right: 0;
width: 25.5%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button7 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button7:hover .btn-overlay4 {
bottom: 0em; }
/* ----- Button #8 ----------- */
#button8 {
overflow: hidden; }
#button8 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
top: 0em;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button8 .btn-overlay1 a {
position: absolute;
bottom: 0; }
#button8:hover .btn-overlay1 {
left: 0; }
#button8 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
top: 25%;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button8 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button8:hover .btn-overlay2 {
right: 0; }
#button8 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
bottom: 25%;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button8 .btn-overlay3 a {
position: absolute;
left: 0; }
#button8:hover .btn-overlay3 {
left: 0; }
#button8 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
bottom: 0;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button8 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button8:hover .btn-overlay4 {
right: 0; }
/* ----- Button #9 ----------- */
#button9 {
overflow: hidden; }
#button9 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
left: 0;
width: 25.75%;
background-color: #009688;
-webkit-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1); }
#button9 .btn-overlay1 a {
position: absolute;
right: 0; }
#button9:hover .btn-overlay1 {
top: 0em; }
#button9 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
left: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button9 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button9:hover .btn-overlay2 {
bottom: 0em; }
#button9 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
right: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button9 .btn-overlay3 a {
position: absolute;
left: 0; }
#button9:hover .btn-overlay3 {
top: 0em; }
#button9 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
right: 0;
width: 26%;
background-color: #009688;
-webkit-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1); }
#button9 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button9:hover .btn-overlay4 {
bottom: 0em; }
/* ----- Button #10 ----------- */
#button10 {
overflow: hidden; }
#button10 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
top: 0em;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1); }
#button10 .btn-overlay1 a {
position: absolute;
bottom: 0; }
#button10:hover .btn-overlay1 {
left: 0; }
#button10 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
top: 25%;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button10 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button10:hover .btn-overlay2 {
right: 0; }
#button10 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
bottom: 25%;
left: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button10 .btn-overlay3 a {
position: absolute;
left: 0; }
#button10:hover .btn-overlay3 {
left: 0; }
#button10 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 25%;
color: #FAFAFA;
position: absolute;
bottom: 0;
right: -8em;
width: 100%;
background-color: #009688;
-webkit-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1); }
#button10 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button10:hover .btn-overlay4 {
right: 0; }
/* ----- Button #11 ----------- */
#button11 {
overflow: hidden; }
#button11 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
left: -2em;
width: 25.75%;
background-color: #009688;
-webkit-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1); }
#button11 .btn-overlay1 a {
position: absolute;
bottom: 0; }
#button11:hover .btn-overlay1 {
left: 0em; }
#button11 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
left: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button11 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button11:hover .btn-overlay2 {
bottom: 0em; }
#button11 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: -3em;
right: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button11 .btn-overlay3 a {
position: absolute;
left: 0; }
#button11:hover .btn-overlay3 {
top: 0em; }
#button11 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: 0;
right: -2em;
width: 26%;
background-color: #009688;
-webkit-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.4s cubic-bezier(0.4, 0, 0.6, 1); }
#button11 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button11:hover .btn-overlay4 {
right: 0; }
/* ----- Button #12 ----------- */
#button12 {
overflow: hidden; }
#button12 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
top: 0;
left: -2em;
width: 25.75%;
background-color: #009688;
-webkit-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1); }
#button12 .btn-overlay1 a {
position: absolute;
bottom: 0; }
#button12:hover .btn-overlay1 {
left: 0em; }
#button12 .btn-overlay2 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
left: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button12 .btn-overlay2 a {
position: absolute;
padding-top: .365em;
right: 0; }
#button12:hover .btn-overlay2 {
bottom: 0em; }
#button12 .btn-overlay3 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: -3em;
right: 2em;
width: 25%;
background-color: #009688;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button12 .btn-overlay3 a {
position: absolute;
padding-top: .365em;
left: 0; }
#button12:hover .btn-overlay3 {
bottom: 0em; }
#button12 .btn-overlay4 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #FAFAFA;
position: absolute;
bottom: 0;
right: -2em;
width: 26%;
background-color: #009688;
-webkit-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.1s cubic-bezier(0.4, 0, 0.6, 1); }
#button12 .btn-overlay4 a {
position: absolute;
bottom: 0; }
#button12:hover .btn-overlay4 {
right: 0; }
/* ----- Button #13 ----------- */
#button13 {
overflow: hidden;
background: #009688;
color: #FAFAFA; }
#button13 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button13:hover .btn-overlay1 {
animation: topBounce 1s linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; }
/* ----- Button #14 ----------- */
#button14 {
overflow: hidden;
background: #009688;
color: #FAFAFA; }
#button14 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button14:hover .btn-overlay1 {
animation: bottomBounce 1s linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; }
/* ----- Button #15 ----------- */
#button15 {
overflow: hidden;
background: #009688;
color: #FAFAFA; }
#button15 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button15:hover .btn-overlay1 {
animation: rightBounce 1s linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; }
/* ----- Button #16 ----------- */
#button16 {
overflow: hidden;
background: #009688;
color: #FAFAFA; }
#button16 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button16:hover .btn-overlay1 {
animation: leftBounce 1s linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; }
/* ----- Button #17 ----------- */
#button17 {
overflow: hidden;
background: #009688;
color: #FAFAFA; }
#button17 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button17:hover {
color: #009688;
transform-origin: bottom;
-webkit-animation: squishBounceOne 1s linear 1;
-moz-animation: squishBounceOne 1s linear 1;
-ms-animation: squishBounceOne 1s linear 1;
-o-animation: squishBounceOne 1s linear 1;
animation: squishBounceOne 1s linear 1; }
/* ----- Button #18 ----------- */
#button18 {
overflow: hidden;
background: #FAFAFA;
color: #FAFAFA; }
#button18 .btn-overlay1 {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 3em;
color: #009688;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: #FAFAFA;
-webkit-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
#button18:hover {
color: #009688;
-webkit-animation: squishBounceTwo 1s linear 1;
-moz-animation: squishBounceTwo 1s linear 1;
-ms-animation: squishBounceTwo 1s linear 1;
-o-animation: squishBounceTwo 1s linear 1;
animation: squishBounceTwo 1s linear 1; }
/* ----- Button #19 ----------- */
#button19 {
color: #009688;
cursor: pointer;
overflow: hidden;
border-color: #009688; }
#button19 .overlay {
box-sizing: border-box;
height: 100%;
position: absolute;
width: 100%;
z-index: 1; }
#button19 .text {
font-size: 1em;
height: 100%;
position: absolute;
text-align: center;
top: 30%;
left: 0;
width: 100%;
z-index: 3; }
#button19 .clickRipple {
-webkit-animation: clickRipple 0.3s linear 1;
-moz-animation: clickRipple 0.3s linear 1;
-ms-animation: clickRipple 0.3s linear 1;
-o-animation: clickRipple 0.3s linear 1;
animation: clickRipple 0.3s linear 1;
background: #FAFAFA;
border-radius: 50%;
opacity: 1;
position: absolute;
transform-origin: center center;
z-index: 4; }
#button19:after {
background-color: #009688;
content: "";
display: block;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .3s;
width: 100%;
z-index: 1; }
#button19:hover {
color: #FAFAFA; }
#button19:hover:after {
opacity: 1; }
/* ----- Button #20 ----------- */
#button20 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #4CAF50;
border-right: 2px solid #CDDC39;
background-image: linear-gradient(to left, #CDDC39, #4CAF50), linear-gradient(to left, #CDDC39, #4CAF50);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button20 span {
background: -webkit-linear-gradient(left, #4CAF50, #CDDC39);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
#button20:hover {
border-width: 24px;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
/* ----- Button #21 ----------- */
#button21 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #009688;
border-right: 2px solid #E91E63;
background-image: linear-gradient(to left, #E91E63, #009688), linear-gradient(to left, #E91E63, #009688);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
#button21 span {
background: -webkit-linear-gradient(left, #009688, #E91E63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
#button21:hover {
border-left: 2px solid #E91E63;
border-right: 2px solid #009688;
background-image: linear-gradient(to left, #009688, #E91E63), linear-gradient(to left, #009688, #E91E63);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button21:hover span {
background: -webkit-linear-gradient(left, #E91E63, #009688);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #22 ----------- */
#button22 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #FFEB3B;
border-right: 2px solid #2196F3;
background-image: linear-gradient(to left, #2196F3, #FFEB3B), linear-gradient(to left, #2196F3, #FFEB3B);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button22 span {
background: -webkit-linear-gradient(left, #FFEB3B, #2196F3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button22:hover {
background: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button22:hover span {
font-size: 22px; }
/* ----- Button #23 ----------- */
#button23 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #9C27B0;
border-right: 2px solid #2196F3;
background-image: linear-gradient(to left, #2196F3, #9C27B0), linear-gradient(to left, #2196F3, #9C27B0);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button23 span {
background: -webkit-linear-gradient(left, #9C27B0, #2196F3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button23:hover {
width: 70%;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button23:hover span {
font-size: 22px; }
/* ----- Button #24 ----------- */
#button24 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #607D8B;
border-right: 2px solid #FF5722;
background-image: linear-gradient(to left, #FF5722, #607D8B), linear-gradient(to left, #FF5722, #607D8B);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button24 span {
background: -webkit-linear-gradient(left, #607D8B, #FF5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button24:hover {
width: 80%;
border-width: 22px;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg); }
#button24:hover span {
transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
background: -webkit-linear-gradient(left, #FF5722, #607D8B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #25 ----------- */
#button25 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #348F50;
border-right: 2px solid #56B4D3;
background-image: linear-gradient(to left, #56B4D3, #348F50), linear-gradient(to left, #56B4D3, #348F50);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button25 span {
background: -webkit-linear-gradient(left, #348F50, #56B4D3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.5s 0.1s ease;
-moz-transition: all 0.5s 0.1s ease;
-ms-transition: all 0.5s 0.1s ease;
-o-transition: all 0.5s 0.1s ease;
transition: all 0.5s 0.1s ease; }
#button25:hover {
height: 60%;
border-width: 20px;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button25:hover span {
transform: scale(0.8);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8); }
/* ----- Button #26 ----------- */
#button26 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #DA22FF;
border-right: 2px solid #9733EE;
background-image: linear-gradient(to left, #9733EE, #DA22FF), linear-gradient(to left, #9733EE, #DA22FF);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button26 span {
background: -webkit-linear-gradient(left, #DA22FF, #9733EE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.5s 0.2s ease;
-moz-transition: all 0.5s 0.2s ease;
-ms-transition: all 0.5s 0.2s ease;
-o-transition: all 0.5s 0.2s ease;
transition: all 0.5s 0.2s ease; }
#button26:hover {
border-width: 30px;
transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button26:hover span {
transform: rotateZ(270deg);
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg); }
/* ----- Button #27 ----------- */
#button27 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #2C3E50;
border-right: 2px solid #004e92;
background-image: linear-gradient(to left, #004e92, #2C3E50), linear-gradient(to left, #004e92, #2C3E50);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
#button27 span {
background: -webkit-linear-gradient(left, #2C3E50, #004e92);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
#button27:hover {
border-width: 8px;
transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
border-left: 2px solid #004e92;
border-right: 2px solid #2C3E50;
background-image: linear-gradient(to left, #2C3E50, #004e92), linear-gradient(to left, #2C3E50, #004e92);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box; }
#button27:hover span {
transform: rotateZ(270deg);
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
background: -webkit-linear-gradient(left, #004e92, #2C3E50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #28 ----------- */
#button28 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #66ff00;
border-right: 2px solid #a80077;
background-image: linear-gradient(to left, #a80077, #66ff00), linear-gradient(to left, #a80077, #66ff00);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button28 span {
background: -webkit-linear-gradient(left, #66ff00, #a80077);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button28:hover {
background: transparent;
-webkit-animation: rotateBlink 1.25s ease 1;
-moz-animation: rotateBlink 1.25s ease 1;
-ms-animation: rotateBlink 1.25s ease 1;
-o-animation: rotateBlink 1.25s ease 1;
animation: rotateBlink 1.25s ease 1;
animation-fill-mode: forwards; }
#button28:hover span {
font-size: 16px;
transform: rotateZ(-90deg);
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-o-transform: rotateZ(-90deg);
-ms-transform: rotateZ(-90deg); }
/* ----- Button #29 ----------- */
#button29 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #F1F2B5;
border-right: 2px solid #135058;
background-image: linear-gradient(to left, #135058, #F1F2B5), linear-gradient(to left, #135058, #F1F2B5);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button29 span {
background: -webkit-linear-gradient(left, #F1F2B5, #135058);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button29:hover {
-webkit-animation: ballBounce 1.25s ease 1;
-moz-animation: ballBounce 1.25s ease 1;
-ms-animation: ballBounce 1.25s ease 1;
-o-animation: ballBounce 1.25s ease 1;
animation: ballBounce 1.25s ease 1;
animation-fill-mode: forwards; }
/* ----- Button #30 ----------- */
#button30 {
border-top: none;
border-bottom: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 2px solid #FBD3E9;
border-right: 2px solid #BB377D;
background-image: linear-gradient(to left, #BB377D, #FBD3E9), linear-gradient(to left, #BB377D, #FBD3E9);
background-size: 100% 2px;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button30 span {
background: -webkit-linear-gradient(left, #FBD3E9, #BB377D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button30:hover {
width: 80%;
border-width: 22px;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg); }
#button30:hover span {
transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
background: -webkit-linear-gradient(left, #BB377D, #FBD3E9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #31 ----------- */
#button31 {
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
#button31 span {
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.5s 0.2s ease;
-moz-transition: all 0.5s 0.2s ease;
-ms-transition: all 0.5s 0.2s ease;
-o-transition: all 0.5s 0.2s ease;
transition: all 0.5s 0.2s ease; }
#button31:hover {
border-width: 35px;
box-shadow: 8px 0px 28px rgba(33, 33, 33, 0.24), 8px 0px 8px rgba(33, 33, 33, 0.22);
transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg); }
#button31:hover span {
opacity: 0;
transform: rotateZ(270deg);
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg); }
/* ----- Button #32 ----------- */
#button32 {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; }
#button32 span {
font-size: 24px;
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
#button32:hover {
-webkit-animation: inOut 1s infinite ease;
-moz-animation: inOut 1s infinite ease;
-ms-animation: inOut 1s infinite ease;
-o-animation: inOut 1s infinite ease;
animation: inOut 1s infinite ease; }
#button32:hover span {
-webkit-animation: textInOut 1s infinite ease;
-moz-animation: textInOut 1s infinite ease;
-ms-animation: textInOut 1s infinite ease;
-o-animation: textInOut 1s infinite ease;
animation: textInOut 1s infinite ease;
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #33 ----------- */
#button33 {
-webkit-transition: animation 0.8s ease;
-moz-transition: animation 0.8s ease;
-ms-transition: animation 0.8s ease;
-o-transition: animation 0.8s ease;
transition: animation 0.8s ease; }
#button33 span {
font-size: 24px;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8), 1px 1px 2px black; }
#button33:hover {
-webkit-animation: opacityCrank 3s 0.3s infinite ease;
-moz-animation: opacityCrank 3s 0.3s infinite ease;
-ms-animation: opacityCrank 3s 0.3s infinite ease;
-o-animation: opacityCrank 3s 0.3s infinite ease;
animation: opacityCrank 3s 0.3s infinite ease; }
#button33:hover span {
-webkit-animation: slowRotate 3s 0.3s infinite ease;
-moz-animation: slowRotate 3s 0.3s infinite ease;
-ms-animation: slowRotate 3s 0.3s infinite ease;
-o-animation: slowRotate 3s 0.3s infinite ease;
animation: slowRotate 3s 0.3s infinite ease; }
/* ----- Button #34 ----------- */
#button34 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
#button34 span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
font-size: 24px;
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
#button34:hover {
-webkit-animation: borderBounce 0.8s forwards ease;
-moz-animation: borderBounce 0.8s forwards ease;
-ms-animation: borderBounce 0.8s forwards ease;
-o-animation: borderBounce 0.8s forwards ease;
animation: borderBounce 0.8s forwards ease; }
#button34:hover span {
font-size: 18px; }
/* ----- Button #35 ----------- */
#button35 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
#button35 span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
font-size: 24px;
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
#button35:hover {
background: linear-gradient(to right, rgba(0, 191, 143, 0.8) 0%, rgba(0, 150, 135, 0.8) 100%);
border-radius: 25%;
border-color: #F06292;
width: 4em;
height: 4em; }
#button35:hover span {
background: -webkit-linear-gradient(left, #F06292, #F06292);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/* ----- Button #36 ----------- */
#button36 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
#button36 span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
font-size: 24px;
background: -webkit-linear-gradient(left, #43cea2, #185a9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
#button36:hover {
background: linear-gradient(to right, rgba(0, 191, 143, 0.8) 0%, rgba(0, 150, 135, 0.8) 100%);
border-radius: 25%;
border-color: #F06292;
width: 4em;
height: 4em;
transform: rotate(405deg);
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
-ms-transform: rotate(405deg); }
#button36:hover span {
background: -webkit-linear-gradient(left, #F06292, #F06292);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
!
