Вопрос по поводу кнопок и псевдокласса hover

Question

На боковой панели у меня есть кнопочки, которые при наведении, благодаря hover загораются определенным цветом и увеличиваются. Сейчас они все при наведении зеленые. Подскажите, пожалуйста, как сделать так, чтобы они горели разными цветами? Заранее спасибо :)

body {
    background: #FF0000;
    color: #fff;
}

aside {
    float: left;
    background: #000000;
    width: 20%;
    padding: 2.5%;
    height: 100vh;
    color: #fff;
    border-right: 5px solid #4d4d4d;
}

aside img {
    width: 300px;
    float: left;
    margin-left: -50px;
}

aside .Logo {
    font-size: 25px;
    margin-left: 0px;
    font-weight: bold;
    position: relative;
    top: 5px;
}

aside h3 {
    margin-top: 50px;
    font-size: 30px;
}

aside ul {
    list-style: none;
}

aside ul li {
    color: #fff;
    display: block;
    margin-top: 20px;
    transition: transform .6s ease;
}

aside ul li:hover, aside ul a:hover {
    color: #62C144;
    transform: scale(1.05);
}

<!doctype html>
<html lang="ru" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'main/css/main.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
</head>
<body>
    <aside>
        <img src="{% static 'main/img/newmainlogo.svg' %}" alt = "Logo">
<!--        <span class="Logo">Qollabora</span>-->
        <h3>Навигация</h3>
        <ul>
            <a><li><i class="fa-solid fa-house"></i> Главная</li></a>
            <a><li><i class="fa-solid fa-address-card"></i>  Про нас</li></a>
            <a><li><i class="fa-solid fa-calendar-days"></i>  События</li></a>
            <a><li><i class="fa-solid fa-location-dot"></i>  Пространства</li></a>
            <a><li><i class="fa-solid fa-diagram-project"></i>  Проекты</li></a>
            <a><li><button class="btn btn-info"><i class="fas fa-plus-circle "></i> Добавить событие</li></a>
        </ul>
        <style>
          a {
          text-decoration: none;
          }
        </style>
    </aside>
    <main>
    </main>
</body>
</html>

Answer 1

Вы можете воспользоваться css переменными. Для css свойства color вы можете задать такое значение: var(--color, #62C144) - это будет значить, что возьмется значение из переменной --color, если его не будет, то по умолчанию будет цвет #62C144.
В HTML же для <a> мы можем задать допустим style="--color: red;", это установит нашей переменной значение red.

P.S. У вас не правильная структура внутри ul, в ul могут лежать только li, но никак не a.

body {
    background: #FF0000;
    color: #fff;
}

aside {
    float: left;
    background: #000000;
    width: 20%;
    padding: 2.5%;
    height: 100vh;
    color: #fff;
    border-right: 5px solid #4d4d4d;
}

aside img {
    width: 300px;
    float: left;
    margin-left: -50px;
}

aside .Logo {
    font-size: 25px;
    margin-left: 0px;
    font-weight: bold;
    position: relative;
    top: 5px;
}

aside h3 {
    margin-top: 50px;
    font-size: 30px;
}

aside ul {
    list-style: none;
}

aside ul li {
    color: #fff;
    display: block;
    margin-top: 20px;
    transition: transform .6s ease;
}

aside ul a:hover li {
    color: var(--color, #62C144); /* Туточки */
    transform: scale(1.05);
}

<!doctype html>
<html lang="ru" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'main/css/main.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
</head>
<body>
    <aside>
        <img src="{% static 'main/img/newmainlogo.svg' %}" alt = "Logo">
<!--        <span class="Logo">Qollabora</span>-->
        <h3>Навигация</h3>
        <ul>
            <a style="--color: #DC4242;"><li><i class="fa-solid fa-house"></i> Главная</li></a>
            <a style="--color: blue;"><li><i class="fa-solid fa-address-card"></i>  Про нас</li></a>
            <a><li><i class="fa-solid fa-calendar-days"></i>  События</li></a>
            <a><li><i class="fa-solid fa-location-dot"></i>  Пространства</li></a>
            <a><li><i class="fa-solid fa-diagram-project"></i>  Проекты</li></a>
            <a><li><button class="btn btn-info"><i class="fas fa-plus-circle "></i> Добавить событие</li></a>
        </ul>
        <style>
          a {
          text-decoration: none;
          }
        </style>
    </aside>
    <main>
    </main>
</body>
</html>

Answer 2

#x{
  background: linear-gradient(to top, red 1.2em, green 2.4em, skyblue 3.6em, orange 4.8em, pink 6em);
  -webkit-background-clip: text;
  background-clip: text;
}
#x > *{
  display: list-item;
  list-style: circle inside;
  font: 20px bold;
  margin-left: 1.5em;
}
#x > *:hover{color: transparent;}

<div id='x'>
<a href='#'>ну</a>
<a href='#'>можно</a>
<a href='#'>например</a>
<a href='#'>вот</a>
<a href='#'>так</a>
</div>

Answer 3

Вариантов предложили много, но я предложу вариант простой, при помощи псевдокласса :nth-child()

.link-item {color: black;}
.link-item:nth-child(1):hover {color: red;}
.link-item:nth-child(2):hover {color: orange;}
.link-item:nth-child(3):hover {color: yellow}
.link-item:nth-child(4):hover {color: green;}
.link-item:nth-child(5):hover {color: lightblue;}
.link-item:nth-child(6):hover {color: blue;}
.link-item:nth-child(7):hover {color: violet;}

<a class="link-item" href="#">Красный</a>
<a class="link-item" href="#">Оранжевый</a>
<a class="link-item" href="#">Желтый</a>
<a class="link-item" href="#">Зелёный</a>
<a class="link-item" href="#">Голубой</a>
<a class="link-item" href="#">Синий</a>
<a class="link-item" href="#">Фиолетовый</a>

БЛОГ НА HUSL

Вопрос по поводу кнопок и псевдокласса hover

Ответы (3 шт):