Как изменить размер кнопки 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