Question

i have the following selector in my css:

a:active {
  position: relative;
  top: 1px;
}

So every link has this little button-effect when it’s pressed.

How can i prevent that behaviour for specific links?

e.g. i have a “back to top” link on my website that shouldn’t have this behaviour.

a#back-to-top {
    position:fixed;
    right:0px;
    bottom:20px;
    width:20px;
    height:20px;
    background:green;
}

In this case the “back-to-top” starts to jump.
However if I try to reset this it doesn’t work.

a#back-to-top:active  {
    position:fixed !important;
    bottom:20px !important;
}

any idea what I’m doing wrong or how I could exclude specific links from that active behaviour?

Answer 1

Try resetting the top property as well.

a#back-to-top:active  {
    position: fixed !important;
    top: auto !important;
}