I'm trying to fix this hover effect.. HTML | CSS - html

Question

I'm trying to fix this hover effect where an orange layer covers the sign-up button, but instead, it covers the whole navbar. I'm not sure how to fix it. Some help would be appreciated, please & thanks.
Here is the HTML:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 30px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 5px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ff871e;
transition: all 0.35s;
border-radius: 4px;
}
.navbar__btn:hover {
color: #fff
}
.navbar__btn:hover:after {
width: 100%;
}
.navbar__links:hover {
color: rgb(255, 135, 70);
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
Stackoverflow says i need to add more text in order to post so don't mind this, it's just filler text

Answer 1

I think you've given the hover affect to a wrong class. Your sign up button has a class called "button" and it doesn't have a hover affect. You've given the hover affects to navbar__btn and navbar__links classes. If you fix this I believe you'll be fine. :)

Answer 2

You were making the effect take 100% of the width which wasn't right and as mentioned the class with the :hover effect was the wrong class
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 30px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 5px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ff871e;
transition: all 0.35s;
border-radius: 4px;
}
/*Changed the class and removed the portion of the code which made it take 100% of the width*/
.button:hover {
color: rgb(255, 135, 70);
background: rgb(255, 135, 70);
}
.navbar__links:hover {
color: rgb(255, 135, 70);
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>