CSS Specific button animation/transition

[Gunner714]

Hi,
cant figure it out.
I'm looking for way (or solution) to do button animation like below:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Krygore]

Check out this link from W3schools! I believe you are looking for a :hover transition styling rule.

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

www.w3schools.com

Hope this helps!

 

[Gunner714]

Can do actually simple slide from left to right on button but it goes complicated with add first small transition at the beginning and last transition at the end(hover out) and stick it together. My slide to right code below:

CSS

.button {
    display: inline-block;
    padding: .75rem 1.25rem;
    color: #fff;
    text-transform: uppercase;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $color-grey-dark-1;
        z-index: -2;
    }
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: darken($color-grey-dark-1, 15%);
        transition: all .3s;
        z-index: -1;
    }
    &:hover {
        color: #fff;

        &:before {
            width: 100%;
        }
    }
}

HTML

<div class="container">
    <a href="#" class="button">Hover me</a>
</div>