Как сделать кнопки что бы они были по середине экрана и с отступом от левого края и правого
Для горизонтального центрирования можно обернуть кнопку в div и задать свойство CSS, это будет выглядеть следующим образом: Код для html
Код для CSS div < text-align:center; >Для вертикального центрирования используются способы посложнее: https://ruseller.com/lessons.php?id=1248
30th Dec 2017, 10:19 PM
NezhnyjVampir
31st Dec 2017, 5:35 AM
Кира Золотова
30th Dec 2017, 3:38 PM
Кира Золотова
30th Dec 2017, 4:00 PM
Кира Золотова
Спасибо большое! Удачи
30th Dec 2017, 4:03 PM
Кира Золотова
извините но я не понял что вы хотите имено это скажите
30th Dec 2017, 10:10 PM
Botir Ibragimov
Often have questions like this?
Learn more efficiently, for free:
Introduction to Python 7.1M learners
Introduction to Java 4.7M learners
Introduction to C 1.5M learners
Introduction to HTML 7.5M learners
Кнопки
Используйте настраиваемые стили кнопок Bootstrap для взаимодействия с формами, диалоговыми окнами, т.п. Имеется поддержка нескольких размеров, состояний и т.д.
На этой странице
Примеры
Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.
Primary Secondary Success Danger Warning Info Light Dark Link
button type="button" class="btn btn-primary">Primarybutton> button type="button" class="btn btn-secondary">Secondarybutton> button type="button" class="btn btn-success">Successbutton> button type="button" class="btn btn-danger">Dangerbutton> button type="button" class="btn btn-warning">Warningbutton> button type="button" class="btn btn-info">Infobutton> button type="button" class="btn btn-light">Lightbutton> button type="button" class="btn btn-dark">Darkbutton> button type="button" class="btn btn-link">Linkbutton>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация обозначенная цветом, также доступна и из самого контента (например, видимый текст) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .visually-hidden текст.
Отключение переноса текста
Если вы не хотите переносить текст кнопки, вы можете добавить к ней класс .text-nowrap . В Sass вы можете установить $btn-white-space: nowrap чтобы отключить перенос текста для каждой кнопки.
Тэг «кнопка»
Классы .btn созданы для использования с элементом . Однако их также можно использовать внутри или (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).
a class="btn btn-primary" href="#" role="button">Linka> button class="btn btn-primary" type="submit">Buttonbutton> input class="btn btn-primary" type="button" value="Input"> input class="btn btn-primary" type="submit" value="Submit"> input class="btn btn-primary" type="reset" value="Reset">Контурные кнопки (без фона)
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.
Primary Secondary Success Danger Warning Info Light Dark
button type="button" class="btn btn-outline-primary">Primarybutton> button type="button" class="btn btn-outline-secondary">Secondarybutton> button type="button" class="btn btn-outline-success">Successbutton> button type="button" class="btn btn-outline-danger">Dangerbutton> button type="button" class="btn btn-outline-warning">Warningbutton> button type="button" class="btn btn-outline-info">Infobutton> button type="button" class="btn btn-outline-light">Lightbutton> button type="button" class="btn btn-outline-dark">Darkbutton>В некоторых стилях кнопок используется относительно светлый цвет переднего плана. И для того, чтобы обеспечить достаточный контраст их следует использовать только на темном фоне.
Размеры
Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.
Large button Large button
button type="button" class="btn btn-primary btn-lg">Large buttonbutton> button type="button" class="btn btn-secondary btn-lg">Large buttonbutton>Small button Small button
button type="button" class="btn btn-primary btn-sm">Small buttonbutton> button type="button" class="btn btn-secondary btn-sm">Small buttonbutton>«Отключенние» кнопки
Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу . Отключенные кнопки имеют значение pointer-events: none , что предотвращает срабатывание состояния наведения и активного состояния.
Primary button Button
button type="button" class="btn btn-lg btn-primary" disabled>Primary buttonbutton> button type="button" class="btn btn-secondary btn-lg" disabled>Buttonbutton>«Отключенные» кнопки, созданные из элемента , ведут себя немного иначе:
- Элемент не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ;
- Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
- Отключенные кнопки должны содержать атрибут aria-disabled=»true» для указания вспомогательным технологиям состояния элемента.
a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary linka> a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Linka>Предупреждение о функциональности ссылок
Блочные кнопки
Создавайте гибкие стопки полноразмерных «кнопок блока», как в Bootstrap 4, с помощью наших утилит display и разрывов. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалами, выравниванием и адаптивным поведением.
Button Button
div class="d-grid gap-2"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до точки останова md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет параметры gap-2 . Измените размер окна браузера, чтобы увидеть изменения.
Button Button
div class="d-grid gap-2 d-md-block"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .
Button Button
div class="d-grid gap-2 col-6 mx-auto"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий адаптивный пример и добавили несколько утилит гибкости и утилит ширины на кнопку, чтобы выровнять кнопки по правому краю, когда они больше не сложены.
Button Button
div class="d-grid gap-2 d-md-flex justify-content-md-end"> button class="btn btn-primary me-md-2" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Плагины кнопок
Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».
Визуально эти кнопки переключения идентичны кнопкам чекбоксам и радиокнопкам. Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмечено»/«не отмечено» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как эти переключатели будут объявлены как «Кнопка»/«кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя, а также от того, будет ли этот переключатель иметь смысл для пользователей, когда он будет объявлен как чекбокс или как фактическая кнопка.
Переключение состояний
Добавьте data-bs-toggle=»button» для переключения на активное active состояние кнопки. Если вы предварительно переключаете кнопку, вам необходимо вручную добавить класс .active и aria-pressed=»true» для гарантированой правильной передачи вспомогательным технологиям.
Toggle button Active toggle button Disabled toggle button
button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle buttonbutton> button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle buttonbutton> button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle buttonbutton>a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle linka> a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle linka> a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle linka>Методы
Вы можете создать кнопки с помощью конструктора кнопки, например:
var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) | Метод | Описание |
|---|---|
| toggle | Переключает состояние нажатия. Придает кнопке вид, что она была активирована. |
| dispose | Уничтожает элемент кнопку. (Удаляет сохраненные данные в элементе DOM) |
Например, чтобы переключить все кнопки
var buttons = document.querySelectorAll('.btn') buttons.forEach(function (button) var button = new bootstrap.Button(button) button.toggle() >) Sass
Переменные
$btn-padding-y: $input-btn-padding-y; $btn-padding-x: $input-btn-padding-x; $btn-font-family: $input-btn-font-family; $btn-font-size: $input-btn-font-size; $btn-line-height: $input-btn-line-height; $btn-white-space: null; // Set to `nowrap` to prevent text wrapping $btn-padding-y-sm: $input-btn-padding-y-sm; $btn-padding-x-sm: $input-btn-padding-x-sm; $btn-font-size-sm: $input-btn-font-size-sm; $btn-padding-y-lg: $input-btn-padding-y-lg; $btn-padding-x-lg: $input-btn-padding-x-lg; $btn-font-size-lg: $input-btn-font-size-lg; $btn-border-width: $input-btn-border-width; $btn-font-weight: $font-weight-normal; $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); $btn-focus-width: $input-btn-focus-width; $btn-focus-box-shadow: $input-btn-focus-box-shadow; $btn-disabled-opacity: .65; $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); $btn-link-color: $link-color; $btn-link-hover-color: $link-hover-color; $btn-link-disabled-color: $gray-600; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius; $btn-border-radius-sm: $border-radius-sm; $btn-border-radius-lg: $border-radius-lg; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; $btn-hover-bg-shade-amount: 15%; $btn-hover-bg-tint-amount: 15%; $btn-hover-border-shade-amount: 20%; $btn-hover-border-tint-amount: 10%; $btn-active-bg-shade-amount: 20%; $btn-active-bg-tint-amount: 20%; $btn-active-border-shade-amount: 25%; $btn-active-border-tint-amount: 10%; Миксины
Есть три миксина для кнопок: миксины для кнопок и вариантов контура кнопки (оба основаны на $theme-colors ), плюс миксин размера кнопки.
@mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; > .btn-check:focus + &, &:focus color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle color: $active-color; background-color: $active-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > > &:disabled, &.disabled color: $disabled-color; background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $disabled-border; > > @mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) color: $color; border-color: $color; &:hover color: $color-hover; background-color: $active-background; border-color: $active-border; > .btn-check:focus + &, &:focus box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show color: $active-color; background-color: $active-background; border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > > > &:disabled, &.disabled color: $color; background-color: transparent; > > @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); > Циклы
Варианты кнопок (для обычных и контурных кнопок) используют соответствующие миксины с нашей картой $theme-colors для генерации классов модификаторов в scss/_buttons.scss .
@each $color, $value in $theme-colors .btn-#$color> @include button-variant($value, $value); > > @each $color, $value in $theme-colors .btn-outline-#$color> @include button-outline-variant($value); > > Пример кнопки с иконкой
Кнопка с иконкой
button type="button" class="btn btn-primary"> i class="bi bi-cloud-upload-fill">i> Кнопка с иконкой button> Как прижать кнопку к низу блока CSS?
Нужна помощь верстальщика. Устанавливаю счетчик Яндекс Метрики, а футер не получается стащить вниз. Короче, вопрос в том, как прижать кнопку к низу блока методами CSS или HTML?
24 августа, 2021 в 6:33 дп
:: На WordPress сайт? Видимо, тема — бесплатная и г… Установи нормальный платный шаблон и все будет в шоколаде.
- Контентная перелинковка — как ее делать?
- Плагин Clearfy для SEO — стоит ли покупать?
- Дорвеи в арбитраже трафика
- Почему не продвигается сайт в Яндексе?
- Какой лучший плагин кэширования для WP?
24 августа, 2021 в 6:34 дп
В CSS рекомендую использовать поля и отступы от содержимого до краев блока.
24 августа, 2021 в 6:39 дп
Я использую такой код CSS:
24 августа, 2021 в 7:07 дп
Попробуй обернуть кнопку в контейнер flex — элемент, которому задано свойство display со значением flex. И пропиши justify-content по центру. Футер в этом случае будет постоянно внизу при расширении или уменьшении родителя, а кнопка располагаться по центру. Если же хочешь, чтобы подвал не заезжал на кнопку, используй padding-bottom.
24 августа, 2021 в 7:09 дп
Простой вариант с position: absolute не подходит, так как блок растягивается и кнопка смотрится некрасиво.
24 августа, 2021 в 7:13 дп
Ну вам же написали — вы скорее всего не задали высоту блока 100%, а также надо прописать в display: flex, а в justify-content: center. Пример CSS во вложении.
24 августа, 2021 в 7:35 дп
Я бы предложил более простой способ абсолютного позиционирования. В этом случае родительский элемент должен обязательно иметь относительную позицию relative. Результат будет как в скрине ниже.
Преимущество данного метода — простота выполнения. Однако при таком варианте вы не сумеете поставить рядом другую кнопку (счетчик). Тут не исключено смещение других элементов. Например, они лягут друг на друга и поломать верстку. Поэтому пользуемся этим способом только, если используется всего одна кнопка.
Выравнивание текста кнопок — Программный код для Tilda
УРОВЕНЬ БОГА
Научитесь писать коды для Тильды за 2 часа и зарабатывайте в десятки раз больше.
Для освоения этой темы достаточно обладать: элементарными начальными знаниями в Тильде, абсолютно обычным мышлением и готовностью офигеть от своих скрытых возможностей ��
Легальная покупка По закону я обязан отправить Вам чек, поэтому при оплате Вам потребуется указать e-mail, куда платёжная система отправит чек автоматически. Никаких рассылок не будет. Спамом не занимаюсь. ПРИМЕР ЧЕКА: Безопасность при оплате После оформления заказа мой сайт переадресовывает Вас на страницу банка, и платёжная информация вносится Вами на стороне банка. При этом банк не предоставляет мне доступа к данным Вашей банковской карты и т.д. В базу данных моего сайта попадает только Ваш e-mail, чтобы автоматически отправить туда ссылки для скачивания купленных файлов после подтверждения успешной оплаты от банка. Это я: 
Далее можете не читать (написано для SEO-продвижения сайта)
Выравнивание текста кнопок в ZERO-блоке на Тильде! Зачем это надо: дело в том, что нередко при создании сайта в ZERO-блоке на Тильде возникает ситуация когда необходимо использовать не просто текст, а кнопки. Например, для перехода по ссылкам при клике надо как-то показать пользователю отзывчивость интерфейса. То есть при наведении как-то подсветить текст, что он кликабельный. В одном из своих видеороликов я показывал как создавать двухуровневое меню. И там во втором уровне как раз лучше использовать кнопки, т.к. прикольно когда они подсвечиваются при наведении. Это конечно можно сделать и с текстовоми полями при помощи анимации, но это не очень удобно, да и не все умеют делать. Поэтому использование кнопок в этом случае вполне оправдано, ведь стилизовать кнопку при наведении значительно проще. У неё можно изменить цвет текста, фона и бордюра. В данном примере я нарочно закрасил фон кнопок чтобы вы видели их границы, типа у нас всё по-честному. Итак, определились – кнопки – это круто. Но у кнопок в ZERO-блоке в Тильде есть одна маленькая проблема – название кнопки равняется только по центру. И если мы хотим подравнять кнопки так, чтобы тексты разной длины выстроились ровно по левому или правому краю, да ещё при этом чтобы и кнопки были одинаковой длины, то стандартными средствами Тильды этого достичь не получится. Как ни двигай – либо кнопки ровно либо тексты. Поэтому вот что я предлагаю: Качаем с моего сайта по ссылочке в описании к ролику файлик, открываем его и копируем всё содержимое. Добавляем блок Т123 – HTML-код, жмякаем Контент и вставляем то, что взяли из файлика. Сохранить и закрыть. Осталось зайти в редактирование ZERO-блока и по правой кнопке мыши назначить этот класс кнопкам. Кликаем правой кнопкой мыши на кнопку, выбираем Add CSS Class Name – Добавить имя CSS-класса, справа появляется поле, которого раньше не было. В него и печатаем имя класса. В данном случае у меня это Textalign. То же самое делаем с другими кнопками, где надо выровнять тексты. Сохраняем, закрываем, публикуем – и вот у нас тексты в кнопках выровнялись по краю. И сразу я вам тут ещё предусмотрел отступ. Если отступ не надо, то просто удаляем эту строчку. Сохраняем, публикуем и видим ровные кнопки без отступа.
Сохраните этот товар в закладках