Как изменить размер кнопки submit.


Бывает так, что размеры стандартной кнопки submit не подходят. Например, нам бы хотелось изменить ее размер и сделать крупнее. Способов здесь достаточно много, но в рамках данного поста мы рассмотрим лишь один наиболее простой способ, как изменить размер кнопки submit, используя для этого css-стили.

Допустим, у нас есть простейшая форма с одним текстовым полем и кнопкой submit.

1
2
3
4
5
6
7
8
9
10

<html>
<head>
</head>
<body>
<form>
    <input type="text" name="username">
    <input type="submit" value="send">
</form>
</body>
</html>

Если мы сейчас откроем итоговый html-файл с этим кодом, то увидим, что кнопка приобрела размер в соответствии с величиной текста «send» с небольшими отступами вокруг него. Это отображение по умолчанию. Для изменения размера кнопки мы добавим к ней свой пользовательский класс, а для класса пропишем свойства в хэдере страницы (также стили можно разместить в подключаемом css-файле).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<style>
.my_button {
    width: 90px;
    height: 90px;
}
</style>
</head>
<body>
<form>
    <input type="text" name="username">
    <input type="submit" value="send" class="my_button">
</form>
</body>
</html>

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

Другие посты

Категория: HTML

Оставить комментарий