Styling a button navigation

Question

Привет, ребята, поэтому я пытаюсь создать кнопку навигации для своего сайта. Я пытаюсь заставить его работать на 4 кнопки, я хочу, чтобы они были кругом, разными цветами, а затем, когда пользователь на него нависал, он будет светиться. Так что я получил до сих пор:

HTML:

<nav id="main-menu"> 
    <ul> 
    <li class="model-icon a-color hvr-glow"> 

    </li> 
    <li class="model-icon b-color hvr-glow"> 

    </li> 
    <li class="model-icon c-color hvr-glow"> 

    </li> 
    <li class="model-icon d-color hvr-glow"> 

    </li> 
    </ul> 
</nav> 

#main-menu > ul > li { 
    margin: 0 5px; 
    width: 50px; 
    height: 50px; 
    cursor: pointer; 
} 

.a-color { 
    background-color: Yellow; 
} 

.b-color { 
    background-color: Red; 
} 

.c-color { 
    background-color: White; 
} 

.d-color { 
    background-color: Green; 
} 

Однако проблема, нет никакого эффекта свечения, и они являются коробки, а не круги.

В будущем, то я буду помещать в SVG изображения в середине его, используя этот site

Однако сейчас я просто хочу, чтобы получить коробки, чтобы включить в круг, а затем, когда пользователь парит над ним , он светится

Благодаря

Answer 1

добавить #main-menu > ul > li:hover {} и настроить просчета теней here

и для окружности:

border-radius: 50%;

#main-menu > ul > li { 
 
    margin: 0 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    
 
} 
 
#main-menu > ul > li:hover { 
 
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
border-radius:50%; 
 
} 
 

 
.a-color { 
 
    background-color: Yellow; 
 
} 
 

 
.b-color { 
 
    background-color: Red; 
 
} 
 

 
.c-color { 
 
    background-color: White; 
 
} 
 

 
.d-color { 
 
    background-color: Green; 
 
}

<nav id="main-menu"> 
 
    <ul> 
 
    <li class="model-icon a-color"> 
 

 
    </li> 
 
    <li class="model-icon b-color"> 
 

 
    </li> 
 
    <li class="model-icon c-color"> 
 

 
    </li> 
 
    <li class="model-icon d-color"> 
 

 
    </li> 
 
    </ul> 
 
</nav>