123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                  <body>

    <div class="body-wrapper">

        <div class="title-container">
           CSS Animated Buttons Collection
        </div>


        <div class="section-heading">
            <h1> Sliders </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item">
                    <button id="button1" class="button">
                        <div class="btn-overlay"><a>GO</a></div>
                        Slide Down
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button2" class="button">
                        <div class="btn-overlay">GO</div>
                        Slide Right
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button3" class="button">
                        <div class="btn-overlay">GO</div>
                        Slide Left
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button4" class="button">
                        <div class="btn-overlay">GO</div>
                        Slide Up
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button5" class="button">
                        <div class="btn-overlay1"><a>G</a></div>
                        <div class="btn-overlay2"><a>O</a></div>
                        Horiz Clamp
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button6" class="button">
                        <div class="btn-overlay1"><a>G</a></div>
                        <div class="btn-overlay2"><a>O</a></div>
                        Vert Clamp
                    </button>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->


        <div class="section-heading">
            <h1> Interlocking Sliders </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item">
                    <button id="button7" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a>G</a></div>
                        <div class="btn-overlay3"><a>O</a></div>
                        <div class="btn-overlay4"><a></a></div>
                        Vert Bars
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button8" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a></a></div>
                        <div class="btn-overlay3"><a></a></div>
                        <div class="btn-overlay4"><a></a></div>
                        Horiz Bars
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button9" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a>G</a></div>
                        <div class="btn-overlay3"><a>O</a></div>
                        <div class="btn-overlay4"><a></a></div>
                        V Bar Stagger
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button10" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a></a></div>
                        <div class="btn-overlay3"><a></a></div>
                        <div class="btn-overlay4"><a></a></div>
                        H Bar Stagger
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button11" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a>G</a></div>
                        <div class="btn-overlay3"><a>O</a></div>
                        <div class="btn-overlay4"><a></a></div>
                        Mix Stagger
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button12" class="button">
                        <div class="btn-overlay1"><a></a></div>
                        <div class="btn-overlay2"><a>G</a></div>
                        <div class="btn-overlay3"><a>O</a></div>
                        <div class="btn-overlay4"><a></a></div>
                        Mix Stagger 2
                    </button>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->


        <div class="section-heading">
            <h1> Bounces </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item">
                    <button id="button13" class="button">
                        <div class="btn-overlay1"><a>Bounce Top</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button14" class="button">
                        <div class="btn-overlay1"><a>Bounce Top</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button15" class="button">
                        <div class="btn-overlay1"><a>Bounce Right</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button16" class="button">
                        <div class="btn-overlay1"><a>Bounce Left</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button17" class="button">
                        <div class="btn-overlay1"><a>Squish1</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item">
                    <button id="button18" class="button">
                        <div class="btn-overlay1"><a>Squish2</a></div>
                        GO
                    </button>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->


        <div class="section-heading">
            <h1> Ghosts </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item grid-item-dark">
                    <button id="button19" class="button">
                        <span class="overlay"></span>
                        <span class="text">Click Ripple</span>
                    </button>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button20" class="button"><span class="text">Gradient</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button21" class="button"><span class="text">Gradient2</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button22" class="button"><span class="text">Gradient3</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button23" class="button"><span class="text">Gradient4</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button24" class="button"><span class="text">Gradient5</span></a>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->

        <div class="section-heading">
            <h1> Circle Ghosts </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item grid-item-dark">
                    <a id="button25" class="circle-button"><span class="text">Zoom</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button26" class="circle-button"><span class="text">Sphere</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button27" class="circle-button"><span class="text">Spin</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button28" class="circle-button"><span class="text">Blink</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button29" class="circle-button"><span class="text">Bounce</span></a>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item-dark">
                    <a id="button30" class="circle-button"><span class="text">Flip</span></a>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->

        <div class="section-heading">
            <h1> Circle Navs </h1>
        </div>
        <div class="grid-container">

            <div class="grid-col">

                <div class="grid-item grid-item">
                    <div id="button31" class="circle-nav"><span class="text"><a>&#9547;</a></span></div>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item">
                    <div id="button32" class="circle-nav"><span class="text"><a>&#9825;</a></span></div>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item">
                    <div id="button33" class="circle-nav"><span class="text"><a>&#9547;</a></span></div>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item">
                    <div id="button34" class="circle-nav"><span class="text"><a>&#9547;</a></span></div>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item">
                    <div id="button35" class="circle-nav"><span class="text"><a>&#9547;</a></span></div>
                </div><!-- end /.grid-item -->

                <div class="grid-item grid-item">
                    <div id="button36" class="circle-nav"><span class="text"><a>&#9547;</a></span></div>
                </div><!-- end /.grid-item -->

            </div><!-- end /.grid-col -->

        </div><!-- end /.grid-container -->


        <div class="creator-wrapper">
            <span>Made with
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
                <path fill="#3F4C6B" d="M11.8,1c-1.682,0-3.129,1.368-3.799,2.797C7.33,2.368,5.883,1,4.201,1c-2.318,0-4.2,1.882-4.2,4.2
                    c0,4.716,4.758,5.952,8,10.616c3.065-4.635,8-6.051,8-10.616C16.001,2.881,14.119,1,11.8,1L11.8,1z"/>
                </svg> | by <a href="http://www.alexanderjwold.com">A_Wold</a></span>
        </div>

    </div><!-- end /.body-wrapper -->

    <!-- ===================  SCRIPTS =================== -->

    </body>
            
          
!
            
              /* ==================== 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; }
            
          
!
            
              $(document).ready(function(){

  $(".ham").click(function(){
    $(this).toggleClass("active");
  });

  (function () {
    var button, 
         delay, 
   clickRipple;

    button = document.getElementById('button19');


    delay = function (t, f) {
        return setTimeout(f, t);
    };

    clickRipple = function (x, y, d) {
        var cell, 
           decay;
        cell = document.createElement('div');
        cell.className = 'clickRipple';
        cell.style.left = x + 'px';
        cell.style.top = y + 'px';
        cell.style.height = d + 'px';
        cell.style.width = d + 'px';
        decay = delay(280, function () {
            return button.removeChild(cell);
        });
        return cell;
    };

    button.addEventListener('click', function (e) {
        var offset, 
              rect, 
                 x, 
                 y;
        rect = this.getBoundingClientRect();
        offset = this.offsetWidth;
        x = e.clientX - rect.left - offset;
        y = e.clientY - rect.top - offset;
        return this.appendChild(clickRipple(x, y, offset * 2));
    });

	}.call(this));

});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console