2 transitions on button

[toolman]

Hi,

I am trying to add 2 transitions on a button when the user hovers on it. I want to change the colour of the button gradually and also raise the button upwards smoothly by 5px.

This is what I have but the button jumps up rather than a smooth transition.

a.button{
	background:  #ea494d;
	padding: 15px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	border: 2px solid #ea494d;
	transition: all 0.2s ease;
	box-sizing: border-box;
	text-shadow: 0 1px 0 rgba(0,0,0,0.01);
	line-height: 22px;
	position: relative
	
	
}
a.button:hover{
	background: #f25256;
  	color: #fff;
  	border-color: #f25256;
	top: -5px;	
	position: relative;
	transition: top ease 0.5s
}

How can I add 2 transition on the same button?

Thanks

[Gandalf]

Does

transition: all ease 0.5s;

do what you want?

[toolman]

Thanks for the reply.

It didn’t work I added it to the hover state.

[Gandalf]

It should replace the transition you already have.

[PaulOB]

Use transform translate rather than top for smoother transitions.

e.g.

a.button{
	background:  #ea494d;
	padding: 15px;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	border: 2px solid #ea494d;
	box-sizing: border-box;
	text-shadow: 0 1px 0 rgba(0,0,0,0.01);
	line-height: 22px;
	display:inline-block;
	transition:all .5s ease;
}
a.button:hover{
	background: #f25256;
  	color: #fff;
  	border-color: #f25256;
	transform:translateY(-5px);
}

You need to make the element inline-block or the padding bleeds out of the line-height.

If you want different timings for the transitions then you can specify them individually using a comma separated list.

e.g.

a.button { transition:transform .2s ease, background .5s ease, border 1s ease;}

[toolman]

Great, thanks, the transform worked

Thanks again!