CODEWITHSUNDEEP
htmlcsstransition
Sean Whelan
Sean Whelan

Reputation: 319

CSS Button Transitions

I'm fairly new to HTML and CSS. In my first website being created, I encountered a problem with CSS transitions. What I want to happen, is when you mouse over, the text and background color transition, and for the same to happen when you mouse off. But instead, one of the CSS transitions seems to be overriding the other. I can't get them both to transition at the same time on mouse off. Am I just missing something, or is it more complicated than just a "transition: color 0.5s"? It's got to be possible somehow.

Check out what I mean here. here: (http://jsfiddle.net/SeanWhelan/oz0amfL7/)

Here is the code for the button:

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color 0.5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
transition: background-color 0.5s;
color: #333; }

I apologise if there's a really simple way to do this, only started learning HTML and CSS a few days ago.

Upvotes: 0

Views: 752

Answers (1)

Benjamin Solum
Benjamin Solum

Reputation: 2321

Give this a try:

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color .5s, background-color .5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
color: #333; }

Transition statements do overwrite one another. You can either comma separate the various properties you want to transition or you can use the all keyword to target all properties.

Upvotes: 3

Related Questions