CODEWITHSUNDEEP
htmlcss
Arkadi w
Arkadi w

Reputation: 89

Css button is changing color on click or click+hold

I programmed a small app in R shiny using css for my buttons.

However button behavior is not what I expected. See the gif

enter image description here

See below my code. What am I missing? I tried most of the focus/visited etc.

.btn-default {
   
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: white !important;
 
    width:120px;
    height: 48px;
   
    padding-top: 8px; 
    background-color: #ECF0F1;
   
    border-width: thin;
    margin-right: 2px;
 
    background: #1B1D21;
   border-radius: 16px;
   border-color: #1B1D21;
}


.btn-default:hover {
   color: white !important;
   background: #35BC27;
}

.btn-default:active {
   color: white !important;
   background: #35BC27;
}

.btn-default:focus {
   color: white !important;
   background: #35BC27;
}

.btn-default:visited {
   color: white !important;
   background: #35BC27;
}

Upvotes: 0

Views: 5592

Answers (3)

anakha
anakha

Reputation: 1280

If you are testing using the developer tools, you are basically emulating a mobile device, which could activate some additional properties.

Try adding this to your selectors:

-webkit-tap-highlight-color: orange;

You should also ensure the correct order of the states (yes, it does matter):

a
a:link
a:visited
a:hover
a:focus
a:active

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

Upvotes: 1

Eugen
Eugen

Reputation: 51

I had the same problem after using the CSS from MaterializeJs. The problem was on button:focus event in my case, but I think this could appear also on hover, focus-visible and others. You have to override the inherited property. Also, you can try to use "!important" on your back.

Upvotes: 1

user10981554
user10981554

Reputation:

it's because you have coded it to act like that. Remove the

.btn-default:hover {
   color: white !important;
   background: #35BC27;
}

.btn-default:active {
   color: white !important;
   background: #35BC27;
}

and it will not take any action on hovering it with mouse.

:hover - is a pseudo class which allows you to change a color, size, text, display, width, height - almost everything you want whenever you "touch" it with your mouse. :active - also a pseudo class which takes action when you try to do something with it.

Upvotes: 1

Related Questions