.my-gradient-button{position:relative;overflow:hidden;transition:color 0.4s ease-in-out}.my-gradient-button::before{content:"";position:absolute;top:0;left:0;width:0%;height:100%;background-color:red;transition:width 0.4s ease-in-out;z-index:0}.my-gradient-button:hover::before{width:100%}.my-gradient-button span{position:relative;z-index:1;transition:color 0.4s ease-in-out}.my-gradient-button:hover span{color:#fff}