HTML + CSS не могу нормально сделать кнопку

Question

HTML + CSS не могу нормально сделать кнопку

Семён Заварзин Ученик (174), открыт 2 недели назад

В коде:
<h1 type="submit" style="color:white;background-color:red">OK
</h1>
кнопка становится на всю ширину страницы, а надо как то ее укоротить что-ли, надеюсь на вашу помощь, ребят(((

Answer 1

ты почти у цели! В HTML `<h1/>` - это заголовок первого уровня, а не кнопка. Чтобы создать кнопку, нужно использовать тег `<button/>`.

Вот исправленный код:

```html
<button type="submit" style="color:white; background-color:red;">OK</button>
```

Чтобы укоротить кнопку, добавим CSS:

```html
<button type="submit" style="color:white; background-color:red; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px;">OK</button>
```

**Объяснение:**

* **`<button type="submit">`**: Создает кнопку с типом "отправить".
* **`style="... "`:** Добавляет стили к кнопке.
* **`color: white;`**: Устанавливает цвет текста кнопки белым.
* **`background-color: red;`**: Устанавливает цвет фона кнопки красным.
* **`padding: 10px 20px;`**: Добавляет отступы от текста кнопки к краям кнопки.
* **`border: none;`**: Убирает границу кнопки.
* **`border-radius: 5px;`**: Скругляет углы кнопки.
* **`font-size: 16px;`**: Устанавливает размер шрифта в кнопке.

**Советы:**

* **Используй CSS файлы:** Для больших проектов лучше создать отдельный CSS файл и связать его с HTML-файлом, чтобы упростить стилизацию и поддерживать код в порядке.
* **Экспериментируй с стилями:** Попробуй разные варианты цветов, отступов, размеров шрифта, чтобы найти тот стиль, который тебе нравится.
* **Используй CSS фреймворки:** Фреймворки, такие как Bootstrap или Tailwind CSS, предлагают готовые компоненты и стили, которые могут упростить разработку и сэкономить время.

Answer 2

Проблема в том, что вы используете тег <h1> для создания кнопки, а он предназначен для заголовка первого уровня. Это приводит к тому, что кнопка растягивается на всю ширину страницы, так как заголовки по умолчанию ведут себя именно так.

Правильное решение:

1. Используйте тег <button>: Это правильный тег для создания кнопок.
2. Установите ширину и высоту для кнопки: С помощью свойств width и height в CSS.
3. Оформите кнопку: С помощью свойств color, background-color, border, padding и т.д.

Пример кода:

<!DOCTYPE html>
<html>
<head>
<style>
button {
width: 100px; /* Ширина кнопки */
height: 40px; /* Высота кнопки */
color: white;
background-color: red;
border: none; /* Убираем стандартную рамку */
padding: 10px 20px; /* Отступ от текста до границ кнопки */
font-size: 16px; /* Размер текста */
cursor: pointer; /* Изменяем курсор на указатель */
}
</style>
</head>
<body>

<button>OK</button>

</body>
</html>

Объяснение:

* <button>: Используем правильный тег для кнопки.
* width: Задаем ширину кнопки.
* height: Задаем высоту кнопки.
* color: Цвет текста кнопки.
* background-color: Цвет фона кнопки.
* border: none: Убираем стандартную рамку кнопки.
* padding: Создаем отступ между текстом и границами кнопки.
* font-size: Устанавливаем размер текста кнопки.
* cursor: pointer: Меняем курсор на указатель, когда мышь находится над кнопкой.

Важный момент: Вы можете изменить значения width, height, padding, font-size и другие свойства в соответствии с вашим дизайном.

Answer 3

ǫᴜᴢᴢ Мастер (1504) 2 недели назад

OK

И еще можно побаловаться так:

OK

OK

Резидент КазахстанаОракул (68583) 2 недели назад

Валидатор застрелится...
h1 type="submit" не существует

ǫᴜᴢᴢ Мастер (1504) Резидент Казахстана, Я всего лишь взял код человека и добавил параметр ?‍?

Answer 4

Ааабаев Аааб Мудрец (10463) 2 недели назад

ты бы хоть первые 7 сраниц любого мануала по хтмл прочитал для начала... буковки-то знаешь? а англицкие?

Семён ЗаварзинУченик (174) 2 недели назад

я по нему и пробую, откуда столько негатива, дружище?)

Семён Заварзин, твоя тупoсть затмевает весь негатив

Answer 5

Александр Искусственный Интеллект (294959) 2 недели назад

у тебя наверное копка дверного звонка размером с дверь...

АлександрИскусственный Интеллект (294959) 2 недели назад

гы... копка... буква Н бастует...

Answer 6

V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (253233) 2 недели назад

ну, а чо ты хотел поиметь с такой разметки?

Answer 7

Молодой Антип Профи (742) 2 недели назад

А ты девочка или мальчик?

Answer 8

h1 это заголовок.
button это кнопка.

Кто вас научил этому?
Разные элементы нужны для разных целей. Как спутать заголовок с кнопкой, я даже представить не могу. На худой конец можно просто div под свой нужды стилизировать.