Как расположить кнопку в опр точке html
Как расположить кнопку в определенной точки. Что бы она не меняла свое положение, даже при разных разрешениях экрана?
Dosuga.COM
BODY <
background-image: url('ссылка на изображение');
background-attachment:fixed;
height:100%;
background-repeat:no-repeat;
background-position:center;
>
На сайте с 04.05.2008
15 ноября 2013, 20:01
top и left в пикселях указать а не в процентах?
Предлагаю воспользоваться моими услугами корректора. Проверю и уберу все ошибки, поправлю грамматику и склонения, сделаю текст лучше и читабельнее. Высокая скорость работы, цена 20 р за 1000 символов.
Как выровнять кнопку по правому краю в html?
Вариант 1 — float: right; .
Вариант 2 — flex.
Вариант 3 — grid.
Вариант 4 — position: absolute/fixed .
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
1. Родителю text-align: right
2. Родителю flex
— margin-left: auto кнопке
— justify-content: flex-end родителю
3. Абсолют кнопке
и еще пачка других возможностей
Оформление кнопок
Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.
Ширина и высота кнопки
Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).
Пример 1. Размеры кнопки
Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).
Пример 2. Использование padding
Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.
Параметры текста
К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.
Пример 3. Текст на кнопке
Рамка
Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .
Пример 4. Цветные рамки у кнопки
Здесь используется набор кнопок с цветными рамками для различных ситуаций.
Скругление углов
За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .
Пример 5. Скруглённые уголки у кнопок
Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.
| Значение border-radius | Описание | Вид кнопки |
|---|---|---|
| 0.5em | Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. | Кнопка |
| 5em | Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. | Кнопка |
| 50% | Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. | Кнопка |
| 0.8em 0 0.8em 0 | Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. | Кнопка |
Фон
В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .
Пример 6. Использование background-color
Здесь используется набор цветных кнопок для различных ситуаций.
Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.
Пример 7. Сочетание фона и линии
Градиентный фон
Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:
button
Для горизонтального градиента слева направо добавится ещё один параметр to right:
button
Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.
linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.
Пример 8. Градиентные кнопки
Добавление тени
Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.
button
Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .
button
В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.
Пример 9. Кнопки с тенью
Генератор различных теней вы можете увидеть здесь: front-end-tools.com/en/generateboxshadow/
Итоги
- Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
- Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
- Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
- Тень к кнопке добавляется через свойство box-shadow.
Как выровнять кнопку по центру используя CSS и HTML
Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:
Разберем их подробнее.
Как использовать margin: auto для центрирования кнопки
Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto , а затем добавить display: block , чтобы сделать кнопку в центре.
button < margin: 0 auto; display: block; > margin: 0 auto — это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.
Автоматическое поле — это то, что заставляет кнопку центрироваться. Тут важно, чтобы кнопка находилась внутри блока.
Как центрировать кнопку с помощью HTML тега div
Второй вариант — обернуть кнопку тегом div , а затем использовать text-align: center для центрирования кнопки внутри этого .
Как будто ты размещаешь текст по центру.
div < text-align: center; > div> button>Centered buttonbutton> div> Обратной стороной этого подхода является то, что каждый раз, когда ты хочешь центрировать кнопку, тебе придется создавать новый элемент div только для этой кнопки.
А если у тебя много кнопок, которые требуют частого обновления стиля, поддерживать их быстро становится проблемой.
В таком случае лучше использовать первый вариант.
Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.
Как центрировать кнопку с помощью CSS flexbox
Третий вариант — использовать flexbox для центрирования кнопки.
Этот подход идеален, если ты уже используешь flexbox на веб-странице, а кнопка находится внутри родительского элемента.
Чтобы центрировать кнопку с помощью flexbox , ты должен сделать 2 вещи:
- сначала добавь display: flex к родительскому элементу кнопки, чтобы активировать функции flexbox
- затем добавь justify-content: center , чтобы кнопка была по центру
В приведенном ниже примере div является родительским элементом кнопки.
div < display: flex; justify-content: center; > div> button>Centered buttonbutton> div> Теперь ты знаешь 3 способа центрирования кнопки в CSS!