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

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

  • автор:

Как опустить кнопку вниз блока?

введите сюда описание изображения

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100px. У меня не получается это сделать, пробовал через position:absolute; не получается. Делать через margin-top не хочу тк. с изменением размера экрана кнопка будет сьезжать. Помогите пожалуйста.

header < background: url(../img/background-image.png) no-repeat; background-size: 100% 100%; height: 100vh; >.header < padding-top:50px; >.logo < font-size: 25px; font-weight: 800; color: #fff; font-family: 'BIG JOHN'; letter-spacing: 0.13em; >.logo:hover < cursor: pointer; >.menu a < margin-left: 7px; font-size: 16px; color:#fff; font-family: 'Open Sans'; padding: 7px 9px; border: 2px solid transparent; transition: 0.3s; >.menu a:hover < border: 2px solid #fff; border-radius: 100px; color:#fff; text-decoration: none; transition: 1s ease; >.title h1 < margin-top:35%; color:#fff; font-weight: 300; >.title p < padding-top: 30px; color:#fff; >.scroll < >.scroll img < display: block; transition: 0.5s ease; >.scroll img:hover
 
BOUNCY
Hello About Services Portfolio Team Blog Contact

We Are Code Cafe

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

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

В этой статье мы расскажем о том как сделать кнопку в CSS?. Но понимание разницы между Flat UI и Material Design не имеет смысла, если вы не знаете, какие компоненты нужно применять. Давайте быстро пробежимся по основам создания кнопок с помощью CSS .

Обновлено: 2021-07-14 19:23:43 ВЛ Виктория Лебедева автор материала

Основы CSS кнопок

Существует несколько « нетехнических » стандартов кнопок:

  1. Доступность – имеет первостепенное значение. Пользователи с ограниченными возможностями и старыми браузерами должны иметь простой доступ к кнопкам;
  2. Простой текст – пишите на кнопках простой и короткий текст. Пользователи должны сразу понять назначение кнопки и то, куда она их приведет.

Почти все кнопки в интернете используют эффекты с изменением цвета рамок и теней. Это можно сделать реализовать с помощью псевдоклассов. Мы остановимся на двух из них: :hover и :active . Псевдокласс :hover отвечает за поведение CSS при наведении курсора мыши. Код :active , когда пользователь нажал кнопку мыши, но еще ее не отпустил.

С помощью псевдоклассов можно полностью изменить внешний вид кнопки, но это неудобный подход. Новичкам лучше редактировать основные стили кнопки, почти полностью сохраняя ее внешний вид. В реализации данного элемента управления можно выделить три основных аспекта – цвет, тени и время перехода.

Цвет

Изменить цвет CSS buttons можно с помощью различных свойств: color , background-color и border . Сначала разберемся, как выбрать цвет кнопки:

  1. Комбинации цветов – используйте цвета, которые дополняют друг друга. Colorhexa – отличный инструмент для поиска сочетающихся цветов;
  2. Соблюдение палитры — если вы ищете палитру цветов, зайдите на lolcolors .

Тени

С помощью box-shadow можно добавить тень вокруг объекта. Эта идея реализована в Flat UI и Material Design . Более подробно о свойстве box-shadow можно почитать на MDN .

Время плавного перехода

Свойство transition-duration добавляет временные рамки CSS изменениям . Стили кнопки без плавного перехода моментально меняются на стили псевдокласса :hover , что может отпугнуть пользователя. В следующем примере стиль кнопки плавно меняется ( за 0.5 с ): на :hover :

.color-change < border-radius: 5px; font-size: 20px; padding: 14px 80px; cursor: pointer; color: #fff; background-color: #00A6FF; font-size: 1.5rem; font-family: 'Roboto'; font-weight: 100; border: 1px solid #fff; box-shadow: 2px 2px 5px #AFE9FF; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; >.color-change:hover

А смотрится это так:

Код для плавных переходов сложный и старые браузеры по-разному выполняют анимацию. Поэтому нужно добавить префиксы для старых браузеров:

transition-duration: 0.5s /* Обычная запись, работает во всех современных браузерах*/ -webkit-transition-duration: 0.5s; /* Помогает некоторым версиям safari, chrome и android */ -moz-transition-duration: 0.5s; /* для firefox */

Сброс стилей кнопки

Чтобы браузер установил значение по умолчанию для CSS button style , можно установить пользовательские стили:

button.your-button-class

Лучше применять это к классам элементов кнопки, а не к каждой кнопке по отдельности.

Три стиля кнопок

Простой черный и белый

Такие кнопки хорошо сочетаются с множеством различных стилей. Этот эффект основан на контрасте черного и белого.

Рассмотрим код черной кнопки с белым фоном. Чтобы перекрасить кнопку в другой цвет, поменяйте в button стилях CSS все значения white и black местами :

.suit_and_tie < color: white; font-size: 20px; font-family: helvetica; text-decoration: none; border: 2px solid white; border-radius: 20px; transition-duration: .2s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; background-color: black; padding: 4px 30px; >.suit_and_tie:hover

В приведенных выше стилях видно, что свойства font и background-color меняют свои значения со свойством transition-duration.2s . Можно взять цвета своих любимых брендов и создать свою кнопку. Цвета брендов можно найти на BrandColors .

Кнопки Flat UI

Flat UI делает упор на минимализм в HTML button CSS – больше действий, меньше движений. Обычно я перехожу от черно-белых кнопок на Flat UI , когда мой проект начинает обретать форму. Кнопки Flat UI имеют минималистичный вид и подходят под большинство дизайнов.

Улучшим нашу кнопку, добавив ей движения для имитации 3D эффекта .

Мы рассмотрим первую кнопку:

.turquoise < margin-right: 10px; width: 100px; background: #1abc9c; border-bottom: #16a085 3px solid; border-left: #16a085 1px solid; border-right: #16a085 1px solid; border-radius: 6px; text-align: center; color: white; padding: 10px; float: left; font-size: 12px; font-weight: 800; >.turquoise:hover < opacity: 0.8; >.turquoise:active

У button CSS три состояния: обычное, :hover и :active .

:hover содержит всего одну строку кода с уменьшением прозрачности, чтобы сделать кнопку немного светлее, поэтому нам не нужно подбирать более светлый цвет.

Вместо того чтобы указать сплошную рамку border , тут используются свойства border-bottom , border-left и border-right , которые создают 3D-эффект глубины.

Псевдокласс :active часто используется в Flat UI кнопках. Когда наша кнопка становится :active происходит две вещи:

  1. :border-bottom меняется с 3px на 1px . Тень под кнопкой уменьшается, а кнопка опускается на пару пикселей. Это изменение позволяет пользователю почувствовать, что он нажал кнопку;
  2. Цвет фона темнеет, имитируя смещение кнопки от пользователя к экрану. Что также напоминает пользователю о том, что он нажал кнопку.

Во Flat UI ценятся минималистичные движения кнопок, « рассказывающие большую историю ». Многие имитируют сдвиг кнопки с помощью :border-bottom . Стоит отметить, что во Flat UI есть кнопки, которые вообще не двигаются, а только меняют цвет.

Material Design

Material Design – подход к дизайну, который продвигает идею передачи информации в виде карточек с различной анимацией для привлечения внимания. Google перечислил на странице Material Design Homepage три основных принципа:

  • Слово «Материальный» — это метафора;
  • Монотонность, графика, агрессивность;
  • Движение передает значение.

Чтобы лучше понять три этих принципа, взглянем на Material Design в действии:

Эти CSS buttons реализуют две основные идеи – свойство box-shadow и Polymer .

Polymer – фреймворк для создания сайтов. С его помощью эффект распространяющейся волны на кнопках добавляется всего одной строкой кода:

 
SUBMIT
/* эта строка добавляет эффект */

— компонент Polymer . Подключив фреймворк в самом начале HTML , мы получаем доступ к его компонентам. Более подробно ознакомиться с возможностями фреймворка можно на сайте Polymer project .

Теперь поговорим о CSS коде, который реализует принципы Material Design :

body < background-color: #f9f9f9; font-family: RobotoDraft, 'Helvetica Neue'; >/* Button */ .button < display: inline-block; position: relative; width: 120px; height: 32px; line-height: 32px; border-radius: 2px; font-size: 0.9em; background-color: #fff; color: #646464; margin: 20px 10px; transition: 0.2s; transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); >.button:active < box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; >/* Misc */ .button.grey < background-color: #eee; >.button.blue < background-color: #4285f4; color: #fff; >.button.green < background-color: #0f9d58; color: #fff; >.center

Во всех button CSS используется свойство box-shadow . Удалим весь неменяющийся CSS код и посмотрим, как box-shadow работает:

.button < transition: 0.2s; transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); >.button:active

Свойство box-shadow используется в button стилях CSS для добавления тонкой темной тени слева и снизу у каждой кнопки. При нажатии тень немного увеличивается и становится светлее. Это движение имитирует эффект 3D тени , которая как бы подпрыгивает от страницы к пользователю. Эффект прописан в стилях Material Design и его принципах.

Кнопки в стиле Material Design можно создать путем совмещения Polymer и box-shadow эффектов.

  • Слово « материальный » – метафора – с помощью свойства box-shadow мы имитируем эффект 3D тени , создаем аналог настоящей тени;
  • Монотонность, графика, агрессивность – больше относится к ярко-голубым и зеленым кнопкам;
  • Значение передается при помощи движений – с помощью Polymer и анимации свойства box-shadow можно создавать множество различных движений, когда пользователь нажимает на кнопку.

В заключение

Черно-белые кнопки довольно просты и понятны. Flat UI кнопки тоже простые и используют мелкие движения и цвета, чтобы « рассказать большую историю ». Material Design использует крупномасштабные сложные движения, имитирующие реальную тень, чтобы привлечь внимание пользователя.

ВЛ Виктория Лебедева автор-переводчик статьи « An Introduction to the Basics of Modern CSS Buttons »

Как спозиционировать кнопку?

5eba7e6b67f09423391283.png

Что пробовал
Вариант1 — не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header

5eba7fb952af2247673474.png

Вариант 2 — кнопка внутри контейнера—row—col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)

Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили

&-wrap position: absolute padding-top: 800px right: 0 top: 0 &-social position: absolute right: 0 bottom: 0 justify-content: flex-end

Кнопку спозиционировать таким же способом как и кнопки соц сетей?

Наш телефон+38(095)668-55-55
Архитектура

Cпособ сделать жизнь лучше

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Кнопка имеет стиль описанный в варианте 2

/*HEADER*/ .header position: relative z-index: 5 height: 980px border: 5px solid red .button position: absolute bottom: 0 left: 0

Хочу кнопку опустить вниз как лучше сделать

  • Вопрос задан более трёх лет назад
  • 1805 просмотров

4 комментария

Простой 4 комментария

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

Наткнулся на один интересный шаблон.

Хидер идет первым слайдом на весь экран, по центру отображены кнопка:

.bordered-button

Кнопка находится внутри хидера, вида:

 
КНОПКА 1 Кнопка 2 Кнопка 3

.bordered-button, то кнопка опускается в нижний левый угол, но в таком случае, если их 3 — они накладываются друг на друга с небольшим смещением. Как можно их раздвинуть между собой и разместить по центру в самом низу хидера?

Интересный проект по изучению английского:
Английский в формате путешествия по США
Последний раз редактировалось Dennis777; 27.02.2014 в 02:01 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *