-1

I am trying to make a circle of color appear around my navigation buttons. CSS looks like this right now:

.nav-btn {
  line-height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: rgba(70, 48, 70, 0);
}
.nav-btn :hover {
  background-color: rgba(70, 48, 70, 1);
  transition: background-color;
  transition-duration: 1s;
}

... it looks like this when I hover:

hover image

Am I just going about this the wrong way entirely?

I'd prefer answers that use only html and css as I haven't earned javascript yet.

Jonathan Potter
  • 147
  • 1
  • 10

1 Answers1

0

Your mistake is with the hover. It should be .nav-btn:hover not .nav-btn :hover doing that should fix the hover issue.

squidiw
  • 11
  • 1