CODEWITHSUNDEEP
htmlcsshovertransition
MohammaD Shuvo
MohammaD Shuvo

Reputation: 91

How to increase the time of background color change of a button

I can't increase the time of this hover effect which is used gradiant background.

.headerCall{
    font-family:gilroySemiBold;
    color:white;
    width: 27vh;
    height: 9vh;
    border:none;
    margin-top: 2vh;
    margin-right: 4.87vh;
    font-weight: 600;
    font-size: 2.5vh;
    line-height: 3.89vh;
    background: linear-gradient(133.95deg, #F7941D -13.98%, #EE4163 57.42%, #8A2BE2 112.06%);
    border-radius: 6.08vh;
    cursor:pointer;
    transition:  2s;
}
headerCall:hover{
    background: transparent;
    border:0.16vh solid lightgray;
}

Upvotes: 1

Views: 38

Answers (1)

Aman Sharma
Aman Sharma

Reputation: 964

.headerCall{
    font-family:gilroySemiBold;
    color:white;
    width: 27vh;
    height: 9vh;
    border:0.16vh solid transparent;
    margin-top: 2vh;
    margin-right: 4.87vh;
    font-weight: 600;
    font-size: 2.5vh;
    line-height: 3.89vh;
    background: linear-gradient(133.95deg, #F7941D -13.98%, #EE4163 57.42%, #8A2BE2 112.06%);
    border-radius: 6.08vh;
    cursor:pointer;
    transition: all 2s ease-out;
}
.headerCall:hover{
    transition: all 2s ease-in;
    background: red;
    border:0.16vh solid lightgray;
}
<button class="headerCall">here</button>

Upvotes: 2

Related Questions