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