CODEWITHSUNDEEP
csssasscss-transitions
Koray Aslan
Koray Aslan

Reputation: 77

I want to transition for button but it is not working?

.free-btn {
a {
    position: relative;
    .fbtn-bg {
        display: inline-block;
        font-size:20px;
        font-weight: 600;
        color:#000;
        padding:20px 85px;
        background: #f4f4f4;
        border-radius: 14px;
        z-index: 100;
        position: relative;
        transition: all .5s ease-in-out;
        &:hover {
            top:10px;
            right: -10px;
            transition: all .5s ease-in-out;
        }
    }
}

}

I want to transition for buttun but it is not working. Where is my mistake, can u help me guys?

Upvotes: 0

Views: 222

Answers (1)

Dvlpr
Dvlpr

Reputation: 1622

instead of using right and left you should use translate(). the hover selector should look like this:

:hover {
  transform: translate(10px , 10px);
}

Upvotes: 1

Related Questions