/*=== Base ===*/

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
}

:root {
     --nav-height: 8rem;
     --max-width: 1200px;
     --container-padding: 0 4rem;
     --gap: 5rem;
     --bg-color: rgb(240, 240, 240);
     --first-color: rgb(172, 245, 255);
     --text-color: rgb(77, 77, 77);
}


/*=== Font ratio ===*/

html {
     scroll-behavior: smooth;
     font-size: 62.5%;
}

body {
     font-size: 1.6rem;
}

ul {
     list-style: none;
}

a {
     text-decoration: none;
     color: var(--text-color);
}

.section {
     width: var(--max-width);
     margin: 0 auto;
     padding: 5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: var(--gap);
}

.button1 {
     padding: 1rem 1.5rem;
     background: rgb(255, 213, 135);
     border-radius: 5px;
     box-shadow:
          0 2px 5px rgba(0, 0, 0, 0.5),
          inset 0 2px rgba(255, 255, 255, 0.5),
          inset 0 12px 5px rgba(255, 255, 255, 0.5),
          inset 0 -15px 30px rgba(0, 0, 0, 0.2);
}

.button1:hover {
     opacity: .8;
}

.button2 {
     padding: 1rem 1.5rem;
     background: rgb(255, 213, 135);
     border-top: 2px solid rgb(255, 233, 192);
     border-bottom: 2px solid rgb(228, 184, 101);
     border-left: 2px solid rgb(243, 217, 170);
     border-right: 2px solid rgb(243, 217, 170);
     position: relative;
     overflow: hidden;
}

.button2::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.4);
     clip-path: polygon(0 0, 100% 0, 0 100%);
}

.button2::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
     transition: 0.3s;
     transition: .3s;
}

.button2:hover::after {
     left: 100%;
}

.button3 {
     padding: 1rem 1.5rem;
     position: relative;
     background-image: linear-gradient(0deg, rgb(230, 180, 88) -25%, rgb(255, 213, 135) 100%);
     border-radius: 25px;
     box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3),
          inset 0 2px 4px rgba(0, 0, 0, .01),
          inset -2px 0 4px rgba(0, 0, 0, .2),
          inset 2px 0 4px rgba(0, 0, 0, .05);
}

.button3::before {
     content: '';
     position: absolute;
     border-radius: 20px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .6) 5%, rgba(255, 255, 255, .2) 100%);
     width: 80%;
     height: 18px;
     top: 4px;
     left: 50%;
     transform: translateX(-50%);
}

.button3:hover {
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(255, 221, 30),
          0 0 25px rgb(255, 221, 30), 0 0 30px rgb(255, 221, 30), 0 0 50px rgb(255, 221, 30),
          inset 0 -2px 4px rgba(0, 0, 0, .3),
          inset 0 2px 4px rgba(0, 0, 0, .01),
          inset -2px 0 4px rgba(0, 0, 0, .2),
          inset 2px 0 4px rgba(0, 0, 0, .05);
     background-image: linear-gradient(0deg, rgb(255, 229, 173) -25%, rgb(255, 212, 143) 100%);

}

.button4 {
     padding: 1rem 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-around;
     background: rgb(255, 213, 135);
     gap: 1rem;
}

.button4 i {
     transition: transform .3s;
}

.button4:hover i {
     transform: translateX(5px);
}

.button5 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button5::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button5:hover::before {
     height: 0%;
}

.button6 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button6::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button6:hover::before {
     height: 0%;
}

.button7 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button7::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button7:hover::before {
     width: 0%;
}


.button8 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button8::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button8:hover::before {
     width: 0%;
}

.button9 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button9::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button9:hover::before {
     height: 100%;
}

.button10 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button10::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button10:hover::before {
     height: 100%;
}

.button11 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button11::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button11:hover::before {
     width: 100%;
}

.button12 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button12::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button12:hover::before {
     width: 100%;
}

.button13 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button13::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button13:hover::before {
     bottom: 0;
     top: auto;
     height: 100%;
}

.button14 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button14::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     transition: height .4s;
     z-index: -1;
}

.button14:hover::before {
     top: 0;
     bottom: auto;
     height: 100%;
}

.button15 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button15::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button15:hover::before {
     width: 100%;
     right: 0;
     left: auto;
}

.button16 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button16::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     transition: width .4s;
     z-index: -1;
}

.button16:hover::before {
     width: 100%;
     left: 0;
     right: auto;
}


.button17 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button17::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     height: 100%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: width .4s;

}

.button17::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: width .4s;
}

.button17:hover::before, .button17:hover::after {
     width: 0%;
}

.button18 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button18::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: height .4s;

}

.button18::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 50%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: height .4s;
}

.button18:hover::before, .button18:hover::after {
     height: 0%;
}

.button19 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button19::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: width .4s;

}

.button19::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 0%;
     height: 100%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: width .4s;
}

.button19:hover::before, .button19:hover::after {
     width: 100%;
}

.button20 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button20::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: height .4s;

}

.button20::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 0%;
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: height .4s;
}

.button20:hover::before, .button20:hover::after {
     height: 100%;
}

.button21 {
     padding: 1rem 1.5rem;
     border: 1px solid #000;
     position: relative;
}

.button21::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0%;
     height: 0%;
     transform: translate(-50%, -50%);
     background: rgb(255, 213, 135);
     z-index: -1;
     transition: height .4s, width .4s;
}

.button21:hover::before {
     width: 100%;
     height: 100%;
}


.button22 {
     position: relative;
     padding: 1rem 1.5rem;
     border: 1px solid #000;
}

.button22::before {
     content: '';
     position: absolute;
     top: -5px;
     left: -5px;
     width: 20px;
     height: 1px;
     background: #000;
     transition: width .4s, height .4s;
}

.button22::after {
     content: '';
     position: absolute;
     top: -5px;
     left: -5px;
     width: 1px;
     height: 20px;
     background: #000;
     transition: width .4s, height .4s;
}

.button22 span::before {
     content: '';
     position: absolute;
     bottom: -5px;
     right: -5px;
     width: 20px;
     height: 1px;
     background: #000;
     transition: width .4s, height .4s;
}

.button22 span::after {
     content: '';
     position: absolute;
     bottom: -5px;
     right: -5px;
     width: 1px;
     height: 20px;
     background: #000;
     transition: width .4s, height .4s;

}

.button22:hover::before, .button22:hover span::before {
     width: calc(100% + 10px);
}

.button22:hover::after, .button22:hover span::after {
     height: calc(100% + 10px);
}



.button23 {
     position: relative;
     padding: 1rem 1.5rem;
     border: 1px solid #000;
}

.button23::before {
     content: '';
     position: absolute;
     top: -5px;
     right: -5px;
     width: 20px;
     height: 1px;
     background: #000;
     transition: width .4s, height .4s;
}

.button23::after {
     content: '';
     position: absolute;
     top: -5px;
     right: -5px;
     width: 1px;
     height: 20px;
     background: #000;
     transition: width .4s, height .4s;
}

.button23 span::before {
     content: '';
     position: absolute;
     bottom: -5px;
     left: -5px;
     width: 20px;
     height: 1px;
     background: #000;
     transition: width .4s, height .4s;
}

.button23 span::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: -5px;
     width: 1px;
     height: 20px;
     background: #000;
     transition: width .4s, height .4s;

}

.button23:hover::before, .button23:hover span::before {
     width: calc(100% + 10px);
}

.button23:hover::after, .button23:hover span::after {
     height: calc(100% + 10px);
}

.button24 {
     padding: 1rem 1.5rem;
     position: relative;
     box-shadow: inset 1px 1px 0 #000,
          inset -1px -1px #000;
}

.button24::before {
     content: '';
     position: absolute;
     top: 0;
     left: 5px;
     height: 1px;
     width: calc(100% - 10px);
     background: #fff;
     transition: width .4s;
}

.button24::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 5px;
     height: 1px;
     width: calc(100% - 10px);
     background: #fff;
     transition: width .4s;
}

.button24:hover::before, .button24:hover::after {
     width: 0%;
}

.button25 {
     padding: 1rem 1.5rem;
     position: relative;
     box-shadow: inset 1px 1px 0 #000,
          inset -1px -1px #000;
}

.button25::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     height: 1px;
     width: 0%;
     background: #fff;
     transition: width .4s;
}

.button25::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     height: 1px;
     width: 0%;
     background: #fff;
     transition: width .4s;
}

.button25:hover::before, .button25:hover::after {
     width: calc(100% - 10px);
}


.button26 {
     padding: 1rem 1.5rem;
     position: relative;
     border: 1px solid #000;
}

.button26::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: rgb(255, 213, 135);
     z-index: -1;
     clip-path: polygon(0 60%, 10% 80%, 20% 100%, 0 100%);
     transition: clip-path .4s;

}

.button26:hover::before {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.button27 {
     padding: 1rem 1.5rem;
     position: relative;
     border: 1px solid #000;
}

.button27::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: rgb(255, 213, 135);
     z-index: -1;
     clip-path: polygon(0 0%, 10% 0%, 10% 100%, 0 100%);
     transition: clip-path .4s;
}

.button27:hover::before {
     clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%);
}

.button28 {
     padding: 1rem 1.5rem;
     position: relative;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
     transition: box-shadow .4s;
}

.button28:hover {
     box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.2);
}


.button29 {
     padding: 1rem 1.5rem;
     background: rgb(255, 213, 135);
     box-shadow: 5px 5px 0 2px #000;
     transition: box-shadow .3s, transform .4s;
}

.button29:hover {
     box-shadow: 0px 0px 0px 0px #000;
     transform: translate(2px, 2px);
}

.button30 {
     padding: 1rem 1.5rem;
     box-shadow: -5px -5px 0 2px #000;
     border: 2px solid #000;
     transition: box-shadow .3s, transform .4s;
     background: transparent;
}

.button30:hover {
     box-shadow: 0px 0px 0px 0px #000;
     transform: translate(-1px, -1px);
}


.button31 {
     padding: 1rem 1.5rem;
     position: relative;
     border: 2px solid #000;
     top: -5px;
     left: -5px;
     transition: top .4s, left .4s;
}

.button31:hover {
     top: 0;
     left: 0;
}

.button31::before {
     content: '';
     position: absolute;
     top: 10px;
     left: 10px;
     width: 100%;
     height: 100%;
     background: rgb(255, 213, 135);
     z-index: -10;
     transition: top .4s, left .4s;
}

.button31:hover::before {
     top: 0;
     left: 0;
}


.button32 {
     padding: 1rem 1.5rem;
     position: relative;
     background: #fff;
     border: 4px solid;
     border-top-color: rgb(255, 237, 202);
     border-bottom-color: rgb(164, 127, 58);
     border-left-color: rgb(216, 189, 138);
     border-right-color: rgb(156, 131, 85);
}

.button32:hover {
     border-top-color: rgb(211, 170, 93);
     border-bottom-color: rgb(194, 162, 97);
     border-left-color: rgb(156, 131, 85);
     border-right-color: rgb(197, 171, 122);
     background: rgb(255, 248, 234);
     box-shadow: inset 2px 2px 5px #ccc,
          inset -2px -2px 2px #ccc;
}


.button33 {
     padding: 1rem 1.5rem;
     position: relative;
     background: rgb(255, 213, 135);
     box-shadow: 0 6px 0 #ccc;
     transition: box-shadow .3s, transform .3s;
     border-radius: 5px;
}

.button33:hover {
     box-shadow: 0 2px 0 #ccc;
     transform: translateY(2px);
}

.button34 {
     position: relative;
}

.button34 span {
     display: block;
     padding: 1rem 1.5rem;
     background: rgb(255, 213, 135);
     transition: transform .4s;
}

.button34::before {
     content: '';
     position: absolute;
     top: 5px;
     left: 5px;
     width: 100%;
     height: 100%;
     background: #ccc;
     z-index: -1;
}

.button34:hover span {
     transform: translate(5px, 5px);
}

.button35 {
     position: relative;
}

.button35 span {
     display: block;
     padding: 1rem 1.5rem;
     background: rgb(255, 213, 135);
     border: 2px solid #000;
     transition: transform .4s;
}

.button35::before {
     content: '';
     position: absolute;
     top: 5px;
     left: 0;
     width: calc(100% - 4px);
     height: 100%;
     background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #000000 3px, #000000 6px);
     border: 2px solid #000;
     z-index: -1;
}

.button35:hover span {
     transform: translateY(5px);
}

.button36 {
     position: relative;
     padding: 1rem 1.5rem;
     background: rgb(185, 255, 157);
     background: linear-gradient(90deg, rgba(185, 255, 157, 1) 0%, rgba(161, 225, 255, 1) 50%, rgba(240, 255, 67, 1) 100%);
     border-radius: 25px;

}

.button36::before {
     content: '';
     position: absolute;
     top: -5px;
     left: -5px;
     right: -5px;
     bottom: -5px;
     z-index: -1;
     background: linear-gradient(90deg, rgba(185, 255, 157, 1) 0%, rgba(161, 225, 255, 1) 50%, rgba(240, 255, 67, 1) 100%);
     background-size: 100%;
     border-radius: 25px;
     opacity: 0;
     transition: 0.5s;
}

.button36:hover:before {
     filter: blur(20px);
     opacity: 1;
}

.button37 {
     padding: 1rem 1.5rem;
     background: linear-gradient(90deg, rgba(185, 255, 157, 1) 0%, rgba(161, 225, 255, 1) 50%, rgba(240, 255, 67, 1) 100%);
     border-radius: 25px;
     background-size: 200%;
     background-position: 0%;
     transition: background-position .4s;
}

.button37:hover {
     background-position: 200%;
}

.button38 {
     padding: 1rem 1.5rem;
     position: relative;
     background: #000;
     overflow: hidden;
}

.button38::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120%;
     height: 400%;
     background: conic-gradient(#fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
}

.button38:hover::before {
     animation: anim .5s linear infinite;
}

.button38::after {
     content: 'button';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: calc(100% - 6px);
     height: calc(100% - 6px);
     background: #000;
     display: flex;
     align-items: center;
     color: #fff;
     justify-content: center;
}

@keyframes anim {
     0% {

          transform: translate(-50%, -50%) rotate(0deg);
     }

     0% {
          transform: translate(-50%, -50%) rotate(360deg);
     }
}



.button39 {
     padding: 1rem 1.5rem;
     border: 2px solid #000;
     overflow: hidden;
     position: relative;

     background-size: 200%;
     background-position-x: 0%;
     background-repeat: no-repeat;
     color: transparent;
     background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: background-position-x .4s ease-in-out;
}

.button39:hover {
     box-shadow: inset 100% 0px 0px #000;
     background-position-x: 100%;
}

.button39::before {
     content: '';
     position: absolute;
     top: 0;
     left: 100%;
     width: 100%;
     height: 100%;
     background: #000;
     transition: left .4s ease-in-out;
     z-index: -1;
}

.button39:hover::before {
     left: 0;
}

.button40 {
     padding: 1rem 1.5rem;
     border: 2px solid #000;
     overflow: hidden;
     position: relative;

     background-size: 200%;
     background-position-x: 100%;
     background-repeat: no-repeat;
     color: transparent;
     background-image: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: background-position-x .4s ease-in-out;
}

.button40:hover {
     box-shadow: inset 100% 0px 0px #000;
     background-position-x: 0%;
}

.button40::before {
     content: '';
     position: absolute;
     top: 0;
     right: 100%;
     width: 100%;
     height: 100%;
     background: #000;
     transition: right .4s ease-in-out;
     z-index: -1;
}

.button40:hover::before {
     right: 0;
}

.button41 {
     padding: 1rem 1.5rem;
     border: 2px solid #000;
     overflow: hidden;
     position: relative;

     background-size: 100% 200%;
     background-position-y: 0%;
     background-repeat: no-repeat;
     color: transparent;
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: background-position-y .4s ease-in-out;
}

.button41:hover {
     box-shadow: inset 100% 0px 0px #000;
     background-position-y: 100%;
}

.button41::before {
     content: '';
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     transition: top .4s ease-in-out;
     z-index: -1;
}

.button41:hover::before {
     top: 0;
}

.button42 {
     padding: 1rem 1.5rem;
     border: 2px solid #000;
     overflow: hidden;
     position: relative;

     background-size: 100% 200%;
     background-position-y: 100%;
     background-repeat: no-repeat;
     color: transparent;
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: background-position-y .4s ease-in-out;
}

.button42:hover {
     box-shadow: inset 100% 0px 0px #000;
     background-position-y: 0%;
}

.button42::before {
     content: '';
     position: absolute;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     transition: top .4s ease-in-out;
     z-index: -1;
}

.button42:hover::before {
     top: 0;
}