2022/08/05 (更新日:2022/08/08)

ホバーエフェクト

デモ

See the Pen hover effect by logsuke (@design-list) on CodePen.

コード

button

<a href="#" >button</a>



a {
     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);
}

a:hover {
     opacity: .8;
}

button

<a href="#" >button</a>

a {
     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;
}

a::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%);
}

a::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;
}


a:hover::after {
     left: 100%;
}

button

<a href="#" >button</a>

a {
     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);
}

a::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%);
}

a: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%);
}

button

<a href="#" class="button4">button<i class='bx bx-chevron-right'></i></a>

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

a i {
     transition: transform .3s;
}

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

button

<a href="#" >button</a>

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

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

a:hover::before {
     height: 0%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     height: 0%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     width: 0%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     width: 0%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     height: 100%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     height: 100%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     width: 100%;
}

button

<a href="#" >button</a>

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

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

a:hover::before {
     width: 100%;
}

button

<a href="#" >button</a>

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

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

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

button

<a href="#" >button</a>

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

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

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

button

<a href="#" >button</a>

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

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

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

button

<a href="#" >button</a>

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

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

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

button

<a href="#" >button</a>

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

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

}

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

a:hover::before, a:hover::after {
     width: 0%;
}

button

<a href="#" >button</a>

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

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

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

a:hover::before, a:hover::after {
     height: 0%;
}

button

<a href="#" >button</a>

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

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

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

a:hover::before, a:hover::after {
     width: 100%;
}

button

<a href="#" >button</a>

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

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

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

a:hover::before, a:hover::after {
     height: 100%;
}

button

<a href="#" >button</a>

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

a::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;
}

a:hover::before {
     width: 100%;
     height: 100%;
}

button

<a href="#"><span>button</span></a>

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

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

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

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

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

}

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

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

button

<a href="#"><span>button</span></a>

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

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

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

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

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

}

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

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

button

<a href="#" >button</a>

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

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

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

a:hover::before, a:hover::after {
     width: 0%;
}

button

<a href="#" >button</a>

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

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

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

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

button

<a href="#" >button</a>

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

a::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;

}

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

button

<a href="#" >button</a>

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

a::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;
}

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

button

<a href="#" >button</a>

a {
     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;
}

a::before {
     box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.2);
}

button

<a href="#" >button</a>

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

a::before {
     box-shadow: 0px 0px 0px 0px #000;
     transform: translate(2px, 2px);
}

button

<a href="#" >button</a>

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

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

button

<a href="#" >button</a>

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

a:hover {
     top: 0;
     left: 0;
}

a::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;
}

a:hover::before {
     top: 0;
     left: 0;
}

button

<a href="#" >button</a>

a {
     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);
}

a: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;
}

button

<a href="#" >button</a>

a {
     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;
}

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

button

<a href="#"><span>button</span></a>

a {
     position: relative;
}

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

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

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

button

<a href="#"><span>button</span></a>

a {
     position: relative;
}

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

a::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;
}

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

button

<a href="#" >button</a>

a {
     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;

}

a::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;
}

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

button

<a href="#" >button</a>

a {
     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;
}

a:hover {
     background-position: 200%;
}

button

<a href="#" >button</a>

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

a::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);
}

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

a::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);
     }
}

button

<a href="#" >button</a>

a {
     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;
}

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

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

a:hover::before {
     left: 0;
}

button

<a href="#" >button</a>

a {
     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;
}

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

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

a:hover::before {
     right: 0;
}

button

<a href="#" >button</a>

a {
     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;
}

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

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

a:hover::before {
     top: 0;
}

button

<a href="#" >button</a>

a {
     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;
}

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

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

a:hover::before {
     top: 0;
}