Как переместить кнопку в css

Как поменять позицию кнопки влево?

У меня есть кнопка, и вместо того, чтобы находиться слева, она находится посередине. Как её переместить влево?

   Главная a.blubtn < width: 90px; text-align: center; display: block; font-family: arial; text-decoration: none; font-weight: 300; font-size: 14px; border: #1071FF 1px solid; color: #1071FF; padding: 3px; padding-left: 5px; padding-right: 5px; margin: 20px auto; transition: .5s; border-radius: 0px; >a.blubtn:hover < top: 5px; transition: .5s; color: #EE82EE; border: #EE82EE 1px solid; border-radius: 7px; >a.blubtn:active Сообщения

Отслеживать
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
задан 7 окт 2020 в 19:35
11 2 2 бронзовых знака

можно пожалусто разделить код на сниппеты и сделать минимально воспроизводимый пример, или залить рабочий код на codepen

7 окт 2020 в 19:40

Кнопка центрируется за счёт margin . Замените margin: 20px auto; на margin: 20px 0; и кнопка встанет слева

7 окт 2020 в 19:45
@Andrey Freiz Зачем? Помогите мне просто переместить её в другую позицию.
7 окт 2020 в 19:46
@Ein Спасибо огромное
7 окт 2020 в 19:48

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

   Главная a.blubtn < width: 90px; text-align: center; display: block; font-family: arial; text-decoration: none; font-weight: 300; font-size: 14px; border: #1071FF 1px solid; color: #1071FF; padding: 3px; padding-left: 5px; padding-right: 5px; margin: 20px 0; transition: .5s; border-radius: 0px; >a.blubtn:hover < top: 5px; transition: .5s; color: #EE82EE; border: #EE82EE 1px solid; border-radius: 7px; >a.blubtn:active Сообщения

Отслеживать
ответ дан 7 окт 2020 в 20:25
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

css
css3

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Сдвинуть кнопку

Добрый вечер, заменила обычную кнопку картинкой, как мне теперь ее подвинуть в нужное место? Задала айди внутри, но ничего не меняется.

1 2 3 4

form> input type="email" placeholder="Введите Ваш E-mail" id="before" required> input name="buttom" type="image" id="button" value="" src="img/button.png"> /form>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#before { border: 1px solid #ad9d80; padding: 4px 20px 4px 24px; width: 254px; margin-left:500px; margin-top:40px; height: 30px; background-color: white; border-radius: 4px; &;:hover{ border-color: darken(#ad9d80, 10%); text-align:center; } #button { margin-top:100px; }

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сдвинуть кнопку? 🙂
Всем привет хакеры!:) Подскажите пожалуйста, как сдвинуть кнопку вниз? Нашел её в html ( <a.

Скрол, сдвинуть
Возможно ли сам срол по которому ползает ползунок сдвинуть скажем на 20px праве, а сам ползунок на.

Как сдвинуть форму?
подскажите пожалуйста

Сдвинуть маркер вниз
маркер внизу- маленький такой оранжевый треугольничек (.png) как его ниже сдвинуть — а то прямо.

Кнопка вверх для прокрутки страницы сайта в начало

Процесс создания кнопки вверх начнём с HTML-разметки:

В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :

.btn-up { /* фиксированное позиционирование */ position: fixed; /* цвет фона */ background-color: #673ab7; /* расстояние от правого края окна браузера */ right: 20px; /* расстояние от нижнего края окна браузера */ bottom: 0; /* скругление верхнего левого угла */ border-top-left-radius: 8px; /* скругление верхнего правого угла */ border-top-right-radius: 8px; /* вид курсора */ cursor: pointer; /* отображение элемента как flex */ display: flex; /* выравниваем элементы внутри элемента по центру вдоль поперечной оси */ align-items: center; /* выравниваем элементы внутри элемента по центру вдоль главной оси */ justify-content: center; /* ширина элемента */ width: 60px; /* высота элемента */ height: 50px; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть position: fixed . Для определение того, где должен располагаться элемент относительно краёв окна браузера, мы задаём следующие свойства: right: 20px и bottom: 0 .

Выравнивание псевдоэлемента ::before по центру внутри .btn-up выполним с помощью CSS Flexbox. Для этого .btn-up установим следующие свойства: display: flex , align-items: center и justify-content: center .

Шаг 2. Написание JavaScript кода

По умолчанию кнопка вверх не отображается. Показывать кнопку на странице будет только после того, как страница будет прокручена больше чем на 400px.

При нажатии на кнопку .btn-up будем прокручивать страницу к началу с анимацией.

Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:

JavaScript

const btnUp = { el: document.querySelector('.btn-up'), show() { // удалим у кнопки класс btn-up_hide this.el.classList.remove('btn-up_hide'); }, hide() { // добавим к кнопке класс btn-up_hide this.el.classList.add('btn-up_hide'); }, addEventListener() ); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { // переместим в начало страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:

Использование другого SVG-изображения

В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:

.btn-up { position: fixed; background-color: #673ab7; right: 20px; bottom: 20px; border-radius: 22px; cursor: pointer; width: 44px; height: 44px; } .btn-up::before { content: ""; text-align: center; position: absolute; width: 20px; height: 20px; left: 12px; top: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E"); }

Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:

Изменение цвета фона и других свойств кнопки

Для изменения цвета, размера, расположения и других свойств кнопки, необходимо просто отредактировать CSS правила, представленные выше.

Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :

Кнопка с плавным появлением и скрытием

Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.

Для этого в CSS необходимо внести следующие изменения:

.btn-up { position: fixed; /* фиксированная позиция */ background-color: #673ab7; /* цвет заднего фона */ right: 20px; /* расстояние от правого края */ bottom: 0px; /* расстояние от нижнего края */ border-top-left-radius: 8px; /* скругление верхнего левого угла */ border-top-right-radius: 8px; /* скругление верхнего правого угла */ cursor: pointer; /* форма курсора */ display: flex; /* не отображать элемент */ align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; width: 60px; height: 50px; opacity: 1; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

Также необходимо отредактировать JavaScript код, например, так:

Читать:

Как установить виджет яндекс погода на главный экран

JavaScript

const btnUp = { el: document.querySelector('.btn-up'), scrolling: false, show() { if (this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.remove('btn-up_hide'); this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.remove('btn-up_hiding'); }, 300); } }, hide() { if (!this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.add('btn-up_hide'); this.el.classList.remove('btn-up_hiding'); }, 300); } }, addEventListener()  // при прокрутке окна (window) window.addEventListener('scroll', () => { const scrollY = window.scrollY  this.scrolling = false; // если пользователь прокрутил страницу более чем на 200px if (scrollY > 400) { // сделаем кнопку .btn-up видимой this.show(); } else { // иначе скроем кнопку .btn-up this.hide(); } }); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { this.scrolling = true; this.hide(); // переместиться в верхнюю часть страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .

Выезжающая снизу кнопка вверх

В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега :

.btn-up { position: fixed; background-color: #f57c00; left: 20px; bottom: 30px; border-radius: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out; color: #fff; width: 50px; height: 50px; opacity: 1; transform: translateY(0); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; transform: translateY(100px); } .btn-up-icon { width: 40px; height: 40px; fill: currentcolor; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #ef6c00; } }

Как сделать кнопку в css?

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn, при добавлении его к элементу ссылка меняет своё оформление.

Как сделать рабочую кнопку в HTML?

Кнопку в HTML можно сделать тремя различными способами:

С помощью тега input;
С помощью тега button;
С помощью ссылки (тег a) и CSS-свойств.

Как сделать кнопку в Minecraft?

Чтобы сделать каменную кнопку в Майнкрафт, нужен всего 1 камень. Сделать его можно, если пожарить булыжник в печи. Камень также можно добыть киркой, зачарованной на Шёлковое касание.

Как создать кнопку на форме?

Создание кнопки перетаскиванием макроса в форму

Чтобы открыть форму в режиме конструктора, щелкните ее правой кнопкой мыши в области навигации и выберите в контекстном меню пункт Конструктор .
Найдите в области навигации макрос, который должна запускать новая кнопка, и перетащите его в форму.

Как сделать ссылку в тексте HTML?

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).

Как сделать кнопку на экране айфона?

Вывод кнопки «Home» прямо на экран iOS-устройства!

Переходим в настройки iPhone или iPad — открываем основные — универсальный доступ.
Практически в самом низу списка находим пункт — AssistiveTouch, заходим в него и активируем функцию передвигая ползунок.

Как подключить CSS в HTML?

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.

Как добавить строку поиска для сайта HTML?

Элемент является контейнером для формы поиска, поле поиска создается при помощи элемента или , а кнопка отправки данных на сервер может создаваться с помощью элемента или .

Как переместить кнопку вправо в HTML?

Вы также можете переместить кнопку вправо, применив text-align: right; к ее родительскому элементу. В вашем случае это родительское тело. Примечание. Он также позволяет вашему тегу p выравниваться вправо.13 мая 2015 г.

Как создать таблицу в HTML?

Для добавления таблицы на веб-страницу используется тег table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов и . Таблица должна содержать хотя бы одну ячейку (пример 1).

Как сделать воронку в Minecraft?

Здесь показано, как сделать (скрафтить) Загрузочная воронка в Майнкрафт (Minecraft), что для этого необходимо и как располагать ингредиенты. Чтобы сделать загрузочную ворону в Майнкраф, нужны 5 железных слитков и сундук.

Как сделать рычаг в Minecraft?

Чтобы сделать рычаг в Майнкрафт, нужно 1 палка и 1 булыжник. Добыть эти ингредиенты очень легко: палка делается из любых досок, а булыжник легко добыть в горах или под землёй.

Как переместить кнопку в новую строку с помощью CSS?

Я использую React и Material-UI, и создаю numpad. У меня есть сегмент кода, который выглядит так (где KeyPadButton является RaisedButton из Material-UI):

Поэтому, в основном, я хочу, чтобы цифры отображались как:

7, 8, 9 4, 5, 6 1, 2, 3 0

Итак, я хочу, чтобы числа 4, 1, 0 находились в новой строке. Я попытался применить clear: left и display: table но он перемещает их по новой строке, но они одни в строке, тогда как я хочу, например, 5, 6 чтобы быть рядом с 4 и т.д. Я не могу использовать display: block as он разбивает некоторые стили по умолчанию с помощью Material-UI. Любые идеи, как достичь того, чего я хочу?

Как переместить кнопку?

Как переместить курсор на кнопку?
В клиентской области создана кнопка (класс CButton). Как переместить на нее курсор мыши? Ничего не.

Как переместить кнопку в Android studio
Когда пытаюсь переместить кнопку в android studio то она не перемещается, только начал изучать.

Переместить кнопку по углам формы и посчитать количество нажатий на кнопку
помогите, пожалуйста, переместить кнопку по углам формы и посчитать количество нажатий на кнопку в.

Как переместить кнопку на форме перетаскиванием мышки
Как переместить кнопку на форме перетаскивание мышки Drag and Drop

Как переименовать и переместить кнопку Пуск в Windows 8.1?
Господа, такое вот обычное задание, но как его реализовать в Windows 8.1, поскажите.

HTML как переместить кнопку вправо

Извините, если вопрос тупой, потому что я только начинающий в HTML. Как переместить мою кнопку вправо? Я пробовал несколько способов, но, похоже, ничего не получается. Вот мой код.

Есть много способов сделать это, например float .

Вы также можете переместить кнопку вправо, применив text-align: right; к ее родителю. В вашем случае ее родителем является body.

Похожие публикации:

Как на айпад мини 2 установить телеграмм
Как наклеить защитную пленку на айпад
Как сравнить даты в sql
Как убрать обводку у кнопки css