Стилизация кнопки отправки формы

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

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

Вот есть 2 кнопки, одна пересылает по ссылке и имеет класс CSS(вроде так оно называется),
в общем у неё картинка вместо кнопки, и она двойная, картинка в смысле, оно как - то автоматом берёт сначала верхнюю часть, а потом нижнюю.
Сверху просто кнопка, а снизу она светится(происходит когда наводишь).

Это вот она:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style type="text/css">
            /** Классы **/
            .vbuttons {width: 100px; float: left; margin: 0px 0;}
            .vbuttons li {float: left; list-style-type: none; position: relative;}
            .vbuttons a {float: left; height: 50px; overflow: hidden; position: relative;}
            .vbuttons span {background-position: left top; background-repeat: no-repeat; cursor: pointer; display: block; height: 50px; left: 0; position: absolute; top: 0; width:100px;}
            .vbuttons a:hover {visibility: visible; /* --- IE6 bugfix --- */}
            .vbuttons a:hover span {background-position: left bottom;}
            
            /** Графическое меню **/
            .menu1 {width: 100px;}
            .menu1 span {background-image: url(img/bla-bla1.jpg);}
        </style>
    </head>
    <body class="body" onload="finished()">
        <form name=log style="display: inline;" action='login.php' method=post>
            <table style="width:100px; height:50px;" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td align=center>
                        <div class="vbuttons">
                            <a href="http://tratata.ru/tratata.php" class="menu1">Кнопка с выделением
                                <span title="Кнопка с выделением"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

И есть вторая, которая редиректит там куда - то(LOGIN_redirect), но у неё нет этого класса, и картинка одинарная.

Вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style type="text/css">
            /** Классы **/
            .hbuttons {width: 100px; float: left; margin: 0px 0;}
            .hbuttons li {float: left; list-style-type: none; position: relative;}
            .hbuttons a {float: left; height: 50px; overflow: hidden; position: relative;}
            .hbuttons span {background-position: left top; background-repeat: no-repeat; cursor: pointer; display: block; height: 50px; left: 0; position: absolute; top: 0; width:100px;}
            .hbuttons a:hover {visibility: visible; /* --- IE6 bugfix --- */}
            .hbuttons a:hover span {background-position: left bottom;}
        </style>
    </head>
    <body class="body" onload="finished()">
        <form name=log style="display: inline;" action='login.php' method=post>
            <input type=hidden name=LOGIN_redirect value=1>
            <table style="width:100px; height:50px;" border="1" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td align=center>
                        <div class="hbuttons">
                            <input type=image src="img/bla-bla.jpg" title="Кнопка!">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Вся разница между ними вот в этом:

CSS
1
2
3
/** Графическое меню **/
.menu1 {width: 100px;}
.menu1 span {background-image: url(img/bla-bla1.jpg);}

И ещё вот сами они:

HTML5
1
2
3
4
5
<div class="vbuttons">
    <a href="http://tratata.ru/tratata.php" class="menu1">Кнопка с выделением
        <span title="Кнопка с выделением"></span>
    </a>
</div>

HTML5
1
2
3
<div class="hbuttons">
    <input type=image src="img/bla-bla.jpg" title="Кнопка!">
</div>

Так вот, как вторую, неказистую кнопку сделать тоже светящейся при наведении?

Понятно для начала нужно картинку сделать - сделал.
Потом такую фиговину создать:

CSS
1
2
3
/** Графическое меню **/
.menu2 {width: 100px;}
.menu2 span {background-image: url(img/bla-bla.jpg);}

Сделал. Потом нужно в самой кнопке это указать.

Так картинка полностью отображается:

HTML5
1
<input class="menu2" type=image src="img/bla-bla.jpg" title="Кнопка!">

Так вообще ввод текста, и без картинки:

HTML5
1
<input class="menu2" type=image title="Кнопка!">

Так вообще ввод текста, и без картинки:

HTML5
1
<input class="menu2" title="Кнопка!">

Как правильно - то? Ненавангую чую

@Fedor92 · 22.09.2016, 00:14

Сообщение от артист

Как правильно - то? Ненавангую чую

А у меня предчувствие, что Вам никто не навангует....

Ибо вообще не понятно чего Вы хотите... Взял Ваш код, поставил свою картинку и жду когда она светиться начнёт... Так и не дождался...

Посмотрел код... По коду она у Вас перемещается, но не светиться... Хотелось бы чтобы скрины были хоть посмотреть, что там у Вас светиться и желательно грамотное объяснение... Часть с кодом можно не дублировать...

@артист · 22.09.2016, 00:40 **[ТС]**

Выковырял форму входа, кое как, всё работает, но со старой кнопкой.

Вот так кнопка нормальная:

HTML5
1
2
3
4
5
<div class="vbuttons">
    <a href="http://tratata.ru/login.php" class="menu2">Новая кнопка
        <span title="Новая кнопка"></span>
    </a>
</div>

Но из - за вот этого:

HTML5
1
<form name=log style="display: inline;" action='http://tratata.ru/login.php' method=post>

Не работает...

Как это убрать?
Вернее оно не отправляет данные...

Вот полностью страничка с картинками:
HWM Trader Bot.rar

Тут я изменил ширину кнопки войти и стиль её.
Проблема заключается в том, что кнопка не отправляет данные, введённые в форму...

И ещё не работает очистка полей логин и пароль при нажатии...
Ну это я видимо что - то лишнее удалил...

Получается нельзя в CSS или как его, тег этот <a></a> сделать отправку формы?
Блин, уже прочитал уйму статей.
Нет просто ничего похожего, вернее есть, но там всё тоже самое что и так мне понятно.
href="алоло"

Переход на адрес...

@Fedor92 · 22.09.2016, 23:57

Сообщение от артист

Получается нельзя в CSS или как его, тег этот <a></a> сделать отправку формы?

Нельзя...

Форму отправляем submit-ом... Проще кнопке ховерный эффект дописать...

@артист · 24.09.2016, 13:22 **[ТС]**

А как хоть гуглу объяснить что я ищу?
Нахожу только это: Эффект перекатывания с одним рисунком

Добавлено через 43 минуты
Нашел что - то:

HTML5
1
2
3
4
input[type="submit"]:hover {
    border: 1px solid #999;
    color: #000;
}

Не понял куда это ставить...

Добавлено через 1 час 0 минут
Сделал:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="submit"] {
                background: url(http://htmlbook.ru/example/images/mark.png); /* Путь к файлу с исходным  рисунком */
                display: block; /* Рисунок как блочный элемент */
                width: 151px; /* Ширина рисунка в пикселах */
                height: 40px; /* Высота рисунка */
            }
            input[type="submit"]:hover {
                background-position: 0 -40px; /* Смещение фона */
            }
        </style>
    </head>
    <body>
        <form name=log action='/login.php' method=post>
            <input type=hidden name=LOGIN_redirect value=1>
            <p><input name="login" type="text" maxlength=16 title='Логин' value='Логин'></p>
            <p><input type=hidden name="lreseted" value=0></p>
            <p><input name="pass" type="password" maxlength=20 title='Пароль' value='Пароль'></p>
            <p><input type=hidden name="preseted" value=0></p>
            <p><input type="submit" value="Войти в игру!"></p>
        </form>
    </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

Стилизация кнопки отправки формы

Решение