CODEWITHSUNDEEP
css
apatik
apatik

Reputation: 383

color transition on hover but not on focus/active?

I would like my button to have a background/font-color transition when I hover it, but not when I am clicking it (active).

Currently I have the transition effect on both hover and active. I tried adding transition: 0s ease-out; on either :active or :hover but I didn't get the expected result.

What is correct, cleanest and simplest way to do this (by using css) ?

button {
	position: absolute;
	width: 80px;
	height: 28px;
	font-size: 13px;
	font-weight: 700;
	line-height: 28px;
	color: #6cb4d5;
	font-family: 'Lato', sans-serif;
	padding: 0;
	border: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-left: 1px solid #CCC;
	background-color: #fff;
	transition: 0.3s ease-out;
}

button:hover {
	color: #f7f7f7;
	background-color: #6cb4d5;
    outline: 0;
}

button:active {
	color: #f7f7f7;
	background-color: #398cb2;
	outline: 0;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url">&ensp;UPLOAD</button>

Thanks a lot.

Upvotes: 3

Views: 3127

Answers (4)

Shantanu Verma
Shantanu Verma

Reputation: 260

This May Help you-

button {
    position: absolute;
    width: 80px;
    height: 28px;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    color: #6cb4d5;
    font-family: 'Lato', sans-serif;
    padding: 0;
    border: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #CCC;
    background-color: #fff;
    transition: 0.3s ease-in;outline: 0;
}

button:hover {
    color: #f7f7f7;
    background-color: #6cb4d5;
    outline: 0;
}

button:active {
    color: #f7f7f7;
    background-color: #398cb2;
    outline: 0;transition:all 0ms ease-out
}
button:focus{transition:all 0ms ease-out}

Upvotes: 1

Dei8cb
Dei8cb

Reputation: 56

If you want the button to go back to it's original colors on button:active, then adding in the original values to the :active block will correct this.

However, if you want to display the colors you have while hovering over the button while active, simply removing the :active block will give that effect.

Both are here next to each other. Hopefully this is what you wanted. :)

https://jsfiddle.net/2Lzo9vfc/94/

button {
	position: absolute;
	width: 80px;
	height: 28px;
	font-size: 13px;
	font-weight: 700;
	line-height: 28px;
	color: #6cb4d5;
	font-family: 'Lato', sans-serif;
	padding: 0;
	border: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-left: 1px solid #CCC;
	background-color: #fff;
        transition: all 0.3s ease-out;
}

button:hover {
	color: #f7f7f7;
	background-color: #6cb4d5;
        outline: 0;
}


#sub-avatar-url2:hover {
        color: #f7f7f7;
	background-color: #6cb4d5;
        outline: 0;
}

#sub-avatar-url2:active {
        background-color: #fff;
        color: #6cb4d5;
        outline: 0;
        transition: none;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url">&ensp;UPLOAD</button> <br><br>
<button type="submit" name="sub-avatar-url2" id="sub-avatar-url2"> &ensp; UPLOAD</button>

Upvotes: 1

Alex Wright
Alex Wright

Reputation: 456

You could try applying the transition: 0s; to the active statement - however, you also need to add in the :focus event to the declaration chain to prevent the button transitioning when you release the click.

You can see the fiddle here: http://jsfiddle.net/eks8Lc5c/

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

Try this https://jsfiddle.net/2Lzo9vfc/93/

button {
    position: absolute;
    width: 80px;
    height: 28px;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    color: #6cb4d5;
    font-family: 'Lato', sans-serif;
    padding: 0;
    border: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #CCC;
    background-color: #fff;
    transition: all 0.3s ease-out;
}

button:hover {
    color: #f7f7f7;
    background-color: #6cb4d5;
    outline: 0;
}

button:active {
    color: red;
    background-color: blue;
    outline: 0;
    transition: none;
}

Upvotes: 1

Related Questions