:root{ --white: #fff; --color1:#0c7475; --color2:#0eae57; } .btn{ color: transparent; background: var(--color1); font-family: "Playwrite IT Moderna", cursive; font-size: 20px; font-weight: 700; text-transform: capitalize; padding: 6px 14px; border-radius: 0; border: none; overflow: hidden; position: relative; } .btn:hover{ color: transparent; } .btn:before, .btn:after{ content:attr(data-hover); position: absolute; transition: all 0.5s ease-in-out; } .btn:before{ color: var(--color2); transform: translateX(-50%) translateY(-200%); top: 50%; left: 50%; } .btn:hover:before{ transform: translateX(-50%) translateY(-50%); } .btn:after{ color: var(--white); padding: 6px 14px; top: 0; left: 0; } .btn:hover:after{ top: 30px; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }