Как в CSS сделать чтобы при наведении у кнопки был один цвет одновременно?

Question

[CODE GEEK]

Вот сам код

#h_l a:hover{background-color: rgba(80, 116, 154, 0.9);}
.button_login{background: #567CA4;color: #fff; border: #567CA4;}

<a class="fl_l"><input type="submit" class="button_login" name="log_in" value="Войти"></input></a>

Вот изображение кнопки

Comments

[Дмитрий]

Что за вопрос? Перечитайте плиз и сформулируйте более лучше)) неясно же

[Андрей]

Походу я не туда куда надо учусь, тут вон люди оборачивают морально устаревший input type="submit" в тег a без обязательного атрибута href/name.
Встречный вопрос, а зачем это стилизовать если это надо выкинуть?

[Алексей Уколов]

Андрей: вы действительно куда-то не туда учитесь, раз считаете submit морально устаревшим. И атрибута href у ссылки вполне может не быть. Но выкинуть это нужно однозначно.

[CODE GEEK]

Алексей Уколов: я выкину

[Андрей]

Алексей Уколов:
Может и не быть, а зачем тогда вообще использовать этот тег?
Я предпочту использовать button type="submit"

[CODE GEEK]

Андрей: можешь сказать как простерилизовать?

[Андрей]

Леонид Резвицкий:
А чего ты хочешь добиться-то? Что сделать надо?
Но прежде всего я бы задумался над надобностью использования обертки тегом А и убрал закрывающий тег у инпута, если ты все же его хочешь оставить.

[CODE GEEK]

Андрей: чтобы простая кнопка выглядела так

[Андрей]

Леонид Резвицкий:
А еще я бы много раз перепроверил класс-нейминг и убедился в надобности использования стиля по id
И в чем проблема заключается? Почему кнопка не перекрашивается в нужный тебе цвет?

[CODE GEEK]

Андрей: я уже сообразил

[Ankhena]

можешь сказать как простерилизовать?

Самый простой способ - кипячение.

По делу:
1. Код ужасен.
2. не стоит использовать id для стилизации.
3. input одиночный тег.
4. Ссылку вообще убрать.
5. Если изначально был задан бордер и при наведении его быть не должно, логичный вывод: надо убрать бордер. Проще всего сделать его прозрачным. Можно в цвет фона, можно толщину задать нулевую, но тогда кнопка может начать прыгать (зависит от остальной верстки).

[CODE GEEK]

Ankhena W: спасибо учту

[Сергей Мирченко]

Почему просто не сделать так?

.my-button {
    color: #fff;
    background: #08c;
    padding: 15px 20px;
    outline: none;
    border: none;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
}
.my-button:hover {
    color: #eee;
    background: #06a;
    cursor: pointer;
}

<button class="my-button">Кнопка</button>

[CODE GEEK]

Сергей Мирченко: спасибо проверю скажу

[CODE GEEK]

Леонид Резвицкий: все хорошо я немного размеры и цвета исправил а так спасибо помог