Как изменить цвет текста-кнопки?

@Dathris · Регистрация: 08.03.2020

Студворк — интернет-сервис помощи студентам

HTML5
1
<button style="margin-top:2%; margin-left: 33%; padding:0" onclick="document.location='https://vk.com/marinbay_ru'" class="buttons_intro" type="button"><h1 style="color:white;">проходка</h1></button>

Есть у меня вот такая кнопка, мне нужно, чтобы при наведении и нажатии просто менялся цвет текста.

@gogolik · 04.04.2022, 18:21

1) Убрать h1 из кнопки;
2) Вынести стили в css-файл, прописать изменение цвета через :hover.

KingdaKa · 04.04.2022, 18:54

Можно через пигидий:

HTML5
1
<button style="margin-top:2%; margin-left: 33%; padding:0px; background: #ddd; color: #05f;" onmouseover="this.style.color='#f50';" onmouseout="this.style.color='#05f';" onclick="document.location='https://vk.com/marinbay_ru'" class="buttons_intro" type="button">проходка</button>

А лучше в CSS все стили прописать, потому что есть уже класс:

HTML5
1
2
    <button class="buttons_intro" onclick="document.location='https://vk.com/marinbay_ru'"
        type="button">проходка</button>

CSS
1
2
3
4
5
6
7
8
9
10
11
        .buttons_intro {
            margin-top: 2%;
            margin-left: 33%;
            padding: 0px;
            background: #ddd;
            color: #05f;
        }
 
        .buttons_intro:hover {
            color: #f50;
        }

P.S.: onclick - плохая штука, надо избавляться.

@Dathris · 05.04.2022, 12:18 **[ТС]**

Понял, а какая хорошая?

KingdaKa · 05.04.2022, 12:52

Сообщение от Dathris

Понял, а какая хорошая?

Регистрировать все события через addEventListener. Это называется по-моему разделение ответственности в программировании.
Разметка отдельно, оформление отдельно, логика интерфейса отдельно. Смешивать код JS + style + html - очень плохо.

@Dathris · 05.04.2022, 13:40 **[ТС]**

Чем это конкретно плохо?

KingdaKa · 05.04.2022, 14:01

Сообщение от Dathris

Чем это конкретно плохо?

Куча мала потому что, поддерживать код тяжело.

@Dathris · 05.04.2022, 14:11 **[ТС]**

В больших сайтах - может быть

Добавлено через 22 секунды
Стало быть не плохо это, а подходит для других задач.

@gogolik · 05.04.2022, 15:17

Сообщение от Dathris

Стало быть не плохо это, а подходит для других задач.

Суп тоже можно есть вилкой при определенных обстоятельствах. Но никто же так не делает, верно?

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@gogolik Супер-модератор 3970 / 2092 / 832 Регистрация: 13.03.2010 Сообщений: 6,893
	04.04.2022, 18:21
	1) Убрать h1 из кнопки; 2) Вынести стили в css-файл, прописать изменение цвета через `:hover`. 0

@Dathris -11 / 1 / 0 Регистрация: 08.03.2020 Сообщений: 132
	05.04.2022, 12:18 [ТС]
	Понял, а какая хорошая? 0

@Dathris -11 / 1 / 0 Регистрация: 08.03.2020 Сообщений: 132
	05.04.2022, 13:40 [ТС]
	Чем это конкретно плохо? 0

@Dathris -11 / 1 / 0 Регистрация: 08.03.2020 Сообщений: 132
	05.04.2022, 14:11 [ТС]
	В больших сайтах - может быть Добавлено через 22 секунды Стало быть не плохо это, а подходит для других задач. 0