Эффект свечения на всех кнопках, но хочу только на 4

Question

Я делаю веб-страницу (многие из них связаны)

Я добавил функцию / атрибут свечения к своим кнопкам в CSS. Дело в том, что я использовал это;

button:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

Дело в том, что мой CSS-файл связан и используется 5 различными HTML-файлами, и скоро появятся другие. Таким образом, вместо того, чтобы просто получать эффект свечения на 4-5 кнопках, которые есть у меня на одной HTML-странице, функция свечения теперь есть на всех кнопках на всех других HTML-страницах.

Как мне избежать этого, я не могу добавить функцию свечения внутри #id, могу ли я?

Мои кнопки, как это в CSS

#TrafficJam1 {
    position: absolute;
    top: 1120px;
    left: 20px; 
    height:107px;
    width: 278px;
}

Это только один из них

Вот часть HTML этого конкретного,

<input type="image" src="TrafficJam.jpg" id="TrafficJam1">

Я должен использовать этот код, потому что мои кнопки являются изображениями.

Answer 1

Дайте кнопки, которые вы хотите применить этот CSS к class как это:

<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">

Класс - это еще один идентификатор для HTML-элементов. Но он отличается от id в том смысле, что вы можете использовать их для одновременного таргетинга нескольких элементов. Таким образом, вы можете просто назначить нужным кнопкам этот эффект для того же класса и нацелить этот класс в своем CSS следующим образом:

.glow:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

Тогда немного не по теме. То, что вы спрашиваете, довольно простые вещи. Итак, я понял, что вы новичок в HTML и CSS, верно? В случае, если вы, было бы разумно изучить немного больше HTML и CSS с помощью онлайн-инструмента обучения, такого как codecademy.com.

Answer 2

Создайте новую таблицу стилей и свяжите ее на странице, где вы хотите, чтобы кнопки светились. Это легко сделать с помощью <link> тег, но я думаю, вы знакомы с этим. В этом файле вы можете просто добавить код, который вы использовали:

.classname:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}