Search code examples
csshoveroutline

Outline being added on hover

I am creating a "back to top" button for my website. When I hover over the <a> a blue outline appears, and I can't figure out how to get rid of it. What am I leaving out?

Here is what it looks like in its regular state:
enter image description here

And on hover:
enter image description here

The HTML:

<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
</p>

The CSS:

#back-top {
  position: fixed;
  bottom: 30px;
  right: 100px;
}
#back-top a {
  width: 70px;
  display: block;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
#back-top a:hover {
  color: #004276;
  border: none !important;
  outline: none !important;
}
#back-top a:hover span {
  background-color: #777;
  outline: none !important;
  border: none !important;
}
#back-top a span {
  width: 70px;
  height: 50px;
  display: block;
  margin-bottom: 7px;
  background: url("../images/BackToTop.png") no-repeat center center;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
Solution

  • Your problem is you've added a background color to your SPAN on hover.

    since you have a background image with a border radius on top of it, then background color shows through under it.

    to fix it just remove the following from your css:

    #back-top a:hover span {
  background-color: #777;  /* REMOVE THIS LINE */
  outline: none !important;
  border: none !important;
}

    good luck!