I wanted my button to change the background color on hover with a transition from left to right. This is what I tried:

.btn {
    background-color: transparent;
    transition-property: background-color, left, right;
    transition-duration: 1s;
    color: #007eb6;
    border: 1px solid #007eb6;
    &:hover {
      background-color: #007eb6;
      color: #fafafa;
      border: 1px solid #007eb6;
    }

CodePudding user response：

Here is a codepen you can use (Its not mine)

The trick is to set background-position to 0% and on hover change it to 100%

CodePudding user response：

 <button>Bangladesh</button>

CSS Code
button {
            background-color: red;
            color: #fff;
            border: none;
            outline: none;
            padding: 20px 60px;
            font-size: 20px;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }
        button::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            background-color: green;
            transition: .5s;
            z-index: -1;
        }
        button:hover::before {
            width: 100%;
        }