CODEWITHSUNDEEP
css
prince888
prince888

Reputation: 63

CSS3 color transition on hover, but on click have immediate color change

I have coded my page so that when the cursor hovers over the link, it changes color gradually via CSS3. I want it so that when it is clicked, it changes immediately to another color. How can I do this?

.menuButton {
    color: #888;
}
.menuButton:hover {
    color: black;
    -webkit-transition: color 0.7s ease-in;
    -moz-transition: color 0.7s ease-in;
    -o-transition: color 0.7s ease-in;
    -ms-transition: color 0.7s ease-in;
    transition: color 0.7s ease-in;
}
.menuButton:active {
    color: #880000;
}

Upvotes: 2

Views: 1040

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use transition-property:none;

.menuButton:active {
    color: #880000;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    -ms-transition-property: none;
    transition-property: none;
}

Upvotes: 3

Related Questions