Подсвечивающиеся кнопки при наведении на них курсора мышки
Согласитесь, что стандартное оформление кнопок форм (button) уже изрядно поднадоело и хочется эти кнопки как-нибудь приукрасить. Для того чтобы немного оживить данные кнопки, мы предлагаем Вам воспользоваться небольшим CSS кодом, который позволит Вам сделать на своем сайте подсвечивающиеся кнопки (button) при наведении на них курсора мышки.
Ниже расположена пара кнопок с обычной тенью для демонстрации работы скрипта. Наведите курсор мышки на одну из кнопок, и Вы увидите, как появится подсветка у кнопки, находящейся под курсором.
Чтобы получить на своем сайте подобные светящиеся кнопки (button), Вам необходимо скопировать следующий стиль оформления кнопок на Вашу страничку:
<style type="text/css">
.button {
padding: 3px 15px;
margin: 15px;
cursor: pointer;
border: 0px;
background-color: #339900;
font-size: 18px;
color: #000000;
box-shadow: 0 0 5px #FF00FF;
-moz-box-shadow: 0 0 5px #FF00FF;
-ms-box-shadow: 0 0 5px #FF00FF;
-o-box-shadow: 0 0 5px #FF00FF;
-webkit-box-shadow: 0 0 5px #FF00FF;
}
.button:hover {
box-shadow: 0 0 12px #6633FF;
-moz-box-shadow: 0 0 12px #6633FF;
-o-box-shadow: 0 0 12px #6633FF;
-ms-box-shadow: 0 0 12px #6633FF;
-webkit-box-shadow: 0 0 12px #6633FF;
}
</style>Кнопки, к которым следует применить эффект свечения, следует оформлять следующим образом:
<input class="button" type="submit" value="Отправить">
<input class="button" type="submit" value="Отменить">Таким образом, кнопки на Вашем сайте станут более живыми и яркими по сравнению со стандартными кнопками.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.