Css сделать кнопку: Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Leave a Comment / Css / By /

Содержание

Кнопки CSS. Краткий мануал с примерами

HTML и CSS WordSmall

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

Псевдоэлементы ссылок

Еще немаловажную деталь в стилях buttons css играет hover эффект – это когда курсор мыши наводится на веб-элемент и при этом действие меняются его стили. То есть, допустим, есть кнопка с красным фоном и с надписью белого цвета. Это идет вид по умолчанию, когда к кнопке не применяются какие-либо действия.

Но если мы наведём стрелку мышки на наш объект, то ее стили, заданные через псевдоэлемент hover, преобразовываются в иные, к примеру, белый фон и красный текст.

Таких псевдоэлементов ссылки насчитывается всего четыре, а прописываются они через двоеточие с тегом ссылки a:

псевдоэлементОписание
a:linkСтиль ссылки, которую еще не посещали (по умолчанию)
a:visitedСтиль ссылки, которую уже посетили
a:activeСтиль ссылки во время клика по ней
a:hoverСтиль ссылки при наведение мыши на нее

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

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

Для примера сделаем простенькую кнопку, чтобы на начальном этапе был понятен принцип ее создания. Мы будем использовать тег ссылки <a>, а еще можно задействовать тег button или input, но у них немного другая специализация. Поэтому будем работать с тегом ссылки.

Первым делом идет разметка HTML, то есть тег ссылки. И для лучшей определенности дадим нашему элементу класс, к примеру, wsbutton.

<a href="#">Button</a>

Сейчас ссылка имеет вид обычного текста с подчеркиванием, нас такой результат не устраивает. Вот что мы делаем, прописываем стили оформления согласно своим пожеланиям.

/*стиль кнопки по умолчанию*/
a.wsbutton{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    display: table;/*элемент таблицы*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.
 
 5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    margin:0 auto;/*выравнивание по центру*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/
}
/*стили кнопки при наведении курсора мыши на нее*/
a.wsbutton:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}

Довольно все просто: в первом состоянии элемента (по умолчанию) задаем статичные стили. Это вид кнопки, которая будет находиться в нетронутом состоянии. Дальше для псевдоэлемента hover прописываем стили, которые будут применяться при наведении курсора мыши на нее.

Демо

Примеры кнопок CSS

Я собрал небольшую коллекцию самых разных оформлений кнопок, которым можно найти применения на своих сайтах или на других проектах. В состав сборки входит многие разновидности buttons css, включая и с библиотекой Bootstrap.

3d кнопки

Демо Скачать Источник

Кнопки с анимацией фона

Демо Скачать Источник

Стильные hover эффекты

Демо Скачать Источник

Hover эффекты

Демо Скачать Источник

30 стилей hover эффектов

Демо Скачать Источник

Hover эффект тени

Демо Скачать Источник

Bootstrap button

Демо Скачать Источник

Кнопки с библиотекой Bootstrap

Демо Скачать Источник

Еще больше примеров здесь, здесь и здесь.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

Подписаться на новые статьи

Появляющаяся кнопка «Наверх» с помощью CSS

  • Контейнер-кнопка «button»
  • Контейнер-крышка «cap»
  • Пример

Чтобы сделать появляющуюся кнопку «Наверх» с помощью CSS, воспользуемся свойством z-index — спрячем кнопку за неподвижной областью, размером немного большим самой кнопки, фон которой будет таким же, как и фон сайта.

Контейнер-кнопка «button»

  1. Создаём контейнер с кнопкой:
    <a href="#"></a>
  2. Пишем для него стили:
     .button {
	display: block;
	background: url(путь+к+изображению) center no-repeat;
	height: 32px; width: 32px;
	position: fixed; bottom: 10px; right: 10px;
	z-index: 1;
}
display: block;
определяем, что отображать данную ссылку нужно как блок.
background: url(‘путь+к+изображению‘) center no-repeat;
делаем кнопку фоном блока, указывая браузеру, что его нужно поместить в центре и не повторять.
height: 32px; width: 32px;
высота и ширина блока соответственно (их берём исходя из размеров изображения кнопки).
position: fixed; bottom: 10px; right: 10px;
фиксируем блок и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 1;
помещаем блок на 1-ый уровень.

Контейнер-крышка «cap»

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

  1. HTML:
    <div></div>
  2. CSS:
    .cap {
	background-color: цвет+фона+сайта;
	height: 32px; width: 32px;
	position: absolute; bottom: 10px; right: 10px;
	z-index: 2;
}
background-color: цвет+фона+сайта;
устанавливаем фон блока таким же, как и фон сайта.
height: 32px; width: 32px;
высота и ширина блока соответственно (их берём также исходя из размеров изображения кнопки или чуть больше).
position: absolute; bottom: 10px; right: 10px;
делаем блок не фиксированным как предыдущий, а абсолютно позиционированным и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 2;
помещаем блок на 2-ой уровень, то есть выше блока с кнопкой.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Появляющаяся кнопка «Наверх» с помощью CSS</title> <style> p {height: 9999px;} .button { display: block; background: url(/images/blog/31/up.png) center no-repeat; height: 32px; width: 32px; position: fixed; bottom: 10px; right: 10px; z-index: 1; } .cap { background-color: #fff; height: 32px; width: 32px; position: absolute; bottom: 10px; right: 10px; z-index: 2; } </style> </head> <body> <h2>Появляющаяся кнопка «Наверх» с помощью CSS</h2> <p>Чтобы кнопка появилась, нужно прокрутить страницу вниз. </p> <a href=»#»></a> <div></div> </body> </html>

17+ круглых кнопок CSS [примеры и способы создания]

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

С помощью CSS вы можете редактировать эти стандартные стили и создавать уникальный внешний вид. HTML Круглые кнопки со стилем CSS сделают ваш сайт более интересным и привлекательным, потому что у вас есть свой собственный стиль.

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

Как сделать кнопку более округлой CSS?

См. перо на КодПене.

Чтобы создать закругленную кнопку, вы должны использовать свойство CSS border-radius .

Чем выше значение этого свойства, тем более круглыми будут углы.

Вы можете использовать любую единицу CSS для свойства boorder-radius . Это могут быть пиксели, ems, rems, проценты и т. д.

Вот пример кнопки со слегка закругленными углами:

 .my-button{ 
 /* Добавление закругленных углов */ 
 border-radius: 5px; 
 граница: 1px сплошная #000; 
 отступ: 10px 20px; 
 фон: желтый; 
 размер шрифта: 2em; 
 курсор: указатель; 
 }

HTML-разметка не требует ничего особенного. В этом случае мы будем использовать элемент button , но вы можете использовать любой другой, например

div , span или p .

А вот кодовая ручка с примером, так что вы можете немного поиграть с ним:

См. перо на КодПене.

Открыть CodePen

Примеры круглых кнопок CSS

Независимо от того, черпаете ли вы вдохновение или просто нуждаетесь в чем-то другом, отличном от стиля браузера по умолчанию — у нас есть что-то для каждого, так что вот более 15 удивительных круглых кнопок, стилизованных с помощью CSS, которые вы можете использовать.

1. Круглые кнопки CSS с эффектом наведения

См. перо на КодПене.

Открыть CodePen

В нашем первом примере у нас есть классные круглые кнопки CSS, которые имеют эффект наведения на них. Они теряют сплошной цвет фона при наведении курсора, попробуйте!

Если вы думаете о добавлении эффектов наведения к своим круглым кнопкам, ознакомьтесь с этим списком с 10 лучшими эффектами наведения кнопок CSS

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

Кнопки сделаны с использованием тегов ссылок HTML, поэтому вы знаете, что они будут полезны с точки зрения SEO.

2. Минимальные круглые 3D-кнопки

См. перо на КодПене.

Открыть CodePen

Создан на чистом CSS (без сторонних библиотек). CSS легко понять, так как все названо соответствующим образом.

Каждая кнопка использует HTML-тег ссылки, так что это будет хорошо с точки зрения SEO, а HTML-разметка легко используется повторно и понятна.

Стиль минималистичный и выглядит очень современно.

3. Круглая кнопка флажка CSS

См. перо на КодПене.

Открыть CodePen

Не каждая круглая кнопка CSS должна быть основным HTML-тегом ссылки, эта использует флажок в фоновом режиме и действует как тумблер.

Он трехмерный и анимируется при переключении между двумя состояниями. Это выглядит очень круто и очень увлекательно.

4. Круглая кнопка 3D CSS с галочкой

См. перо на КодПене.

Открыть CodePen

Трехмерная HTML-кнопка с галочкой внутри, после нажатия она загорается синим цветом. Вы также можете изменить этот цвет, если он не соответствует вашему стилю.

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

Вы также можете использовать предопределенные переменные CSS для изменения цветов. Делает это очень легко для вас.

5. Тонкая круглая кнопка переключения 3D (CSS)

См. перо на КодПене.

Открыть CodePen

Еще одна круглая кнопка CSS на основе флажка. Он продуманно настроен так, чтобы его можно было многократно использовать, как и в HTML, используется класс-оболочка, а структура достаточно проста.

Тонкое изменение анимации между двумя состояниями выглядит потрясающе и чрезвычайно минимально, совсем не подавляя.

Он просто использует тень, чтобы создать эффект движения кнопки вверх и вниз, что очень легко.

6. Кнопка Arcade Round (CSS)

См. перо на КодПене.

Открыть CodePen

Что-то немного другое и более конкретное: великолепно выглядящая трехмерная аркадная кнопка, которая имеет классный эффект при нажатии на нее.

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

7. Значки с круглыми кнопками CSS

См. перо на КодПене.

Открыть CodePen

Круглые значки кнопок на чистом CSS с текстом и разделенным фоном между верхом и низом каждой кнопки.

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

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

8. Круглые кнопки с набивкой

См. перо на КодПене.

Открыть CodePen

Набор круглых кнопок с чистой структурой HTML, в которой используются теги ссылок, поэтому они отлично подходят для целей SEO.

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

9. Анимированные круглые кнопки

См. перо на КодПене.

Открыть CodePen

Два примера анимированных круглых кнопок. Первый имеет эффект ротора, внешняя обивка вращается, когда вы наводите курсор. Вторая кнопка пульсирует своей границей при наведении.

Структура HTML проста и понятна. Вы можете изменить текст внутри тега ссылки, что также отлично подходит для целей SEO, поскольку веб-сканеры могут легко следовать этим кнопкам.

Анимация плавная и тонкая.

10. Анимированные круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

Минималистичные и тонкие анимированные круглые кнопки CSS со значками посередине.

Каждая кнопка также имеет собственный текст внизу. Значки красиво расположены по центру кнопки, а структура HTML чистая.

При наведении появляется классный эффект, а когда вы убираете мышь, появляется анимация выхода.

11. Круглые пуговицы с каймой

См. перо на КодПене.

Открыть CodePen

Набор очень простых, но эффективных круглых кнопок CSS, только чистый HTML и CSS, никаких сторонних библиотек или предварительных рендереров CSS.

Измените цвет в коде CSS, чтобы он соответствовал вашему дизайну. Они также имеют приятный тонкий эффект наведения на них.

12. Кнопки CSS «квадратный-круглый»

См. перо на КодПене.

Открыть CodePen

В этом примере показано, как можно постепенно увеличивать округлость кнопок CSS, начиная с квадрата и двигаясь к полному кругу.

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

13. Закругленные кнопки «плюс» и «минус»

См. перо на КодПене.

Открыть CodePen

Если вы ищете темные кнопки, эта кнопка для вас. У нас есть несколько кнопок «плюс» и «минус» с эффектами наведения и щелчка, очень тонкие эффекты, но не подавляющие.

И HTML, и CSS просты и понятны, отлично подходят, если вы хотите внести изменения или улучшения.

14. Плавающие круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

Здесь, в этом примере, у нас есть несколько круглых кнопок на чистом HTML и CSS, они используют тег «a», поэтому они отлично подходят для SEO.

Самое классное здесь то, что эти кнопки используют CSS float для их позиционирования, проверьте CSS, чтобы увидеть, как все это работает.

См. перо на КодПене.

Открыть CodePen

Создан с использованием фреймворка bootstrap CSS и небольшого количества jQuery для запуска всплывающей анимации для каждой кнопки.

Эти кнопки имеют свои собственные эффекты наведения и всплывающую анимацию, при нажатии на которую граница расширяется и остается там на несколько секунд. Очень тонкий и легкий.

Также есть несколько шестиугольных вариантов, если они вам нравятся.

16. Круглые кнопки Bootstrap (CSS)

См. перо на КодПене.

Открыть CodePen

Набор круглых кнопок, созданных с использованием CSS-фреймворка Bootstrap.

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

17. Пользовательские круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

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

Если удерживать нажатой кнопку, кнопка перемещается дальше во время анимации.

См. перо на КодПене.

Открыть CodePen

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

Попробуйте навести курсор на каждую кнопку и посмотрите, какой у них эффект наведения.

  • 20 лучших тумблеров CSS [Примеры]
  • Красивые индикаторы выполнения CSS [Примеры]
  • Гамбургер-меню на чистом CSS с примерами
  • 20 классных вкладок HTML и CSS [примеры]

Об авторе:

Люк Эмбри — разработчик полного стека, бакалавр компьютерных наук, проживающий в Великобритании.
Подробнее о нем можно узнать на https://lukeembrey.com/

Как сделать цветную кнопку в VS Code с помощью HTML CSS

Привет, мы собираемся сделать кнопку, не уродливую старую кнопку, как эта, а такую ​​красивую кнопку. Не обращайте внимания на верхний отступ, мы исправим это в следующем видео, но у нас есть кнопка, на которую можно нажимать, и у нее красивый фон. Давайте прыгнем и разберемся, как это сделать. Внимание, спойлер, это просто А-тег с отступом, но давайте все равно сделаем это вместе.

Чтобы сделать нашу кнопку, вам, возможно, действительно захочется выяснить, куда мы ее поместим. Я хочу поставить его сразу после этого P-тега здесь. Вот он, Hero Box1, вот мой P-tag. Так что сразу после этого я вставлю, что звучит разумно, есть кнопка. Я собираюсь нажать здесь. Давайте «Сохранить», я собираюсь просмотреть его, и мы получим эту штуку, это своего рода кнопка формы, и это не то, что нам нужно здесь, потому что мы хотим, чтобы это выглядело как макет здесь, и это слишком сложно сделать, используя эту кнопку.

Вы можете немного отформатировать его, чтобы он выглядел так, но проще начать с A-тега, чтобы придать ему отступы и цвет фона. Поэтому мы не будем использовать кнопку. Пойдем и нажмем кнопку, до свидания, кнопку. Все, что нам нужно, это A-тег. Мы использовали это множество раз; куда это пойдет? Давайте на самом деле заставить его пойти куда-нибудь. Я уверен, что вам надоело просто вводить хеш, так что давайте создадим «Файл», «Новую страницу». Я собираюсь сохранить это, оно будет называться моей тестовой страницей. Вы можете сделать ссылку на него по нашим ссылкам прямо сейчас.

Помните, это может быть .html, я вставлю h2, говоря: мы сделали это, новая страница. Я собираюсь закрыть его. Так что я сделал это, закрыл его, и я собираюсь дать ссылку на него сейчас. Так как мы это называем? Тестовая страница. Так что это действительно куда-то идет. Что будет делать эта кнопка? Он предназначен для перехода в раздел «Забронировать онлайн», поэтому между A-тегами мы будем говорить «Забронировать онлайн». Я хочу, чтобы это было в верхнем регистре? Нет. Итак, мы используем заглавные буквы, и именно так это выглядит в браузере. Вы думаете: «Чем это лучше, чем настоящая уродливая кнопка?» Это легко стилизовать.

Давайте приступим к выполнению этих основ, это зависит от того, пошли ли вы и… помните, ранее мы потенциально стилизовали наш A-тег в заголовке или в CSS, и мы назвали это CSS Reset. Это было бы удобно, но я этого не сделал, так что я хочу сказать, что на самом деле я не буду говорить конкретно, я буду говорить довольно широко. Я хочу сказать, что все А-метки здесь наверху… Почему они наверху? Потому что мне кажется, что это очень широкий штрих, поэтому он должен быть вверху. Я хочу сказать, что все A-метки теперь должны быть белого цвета. Это, вероятно, вернется и укусит нас за задницу. Всегда так бывает, когда я занимаюсь фристайлом вот так.

Цвет, и мы собираемся сказать, что для оформления текста установлено значение «нет». Так что это поможет нам начать, надеюсь, вот и все. На самом деле ничего не происходит. Давайте зададим ему цвет фона и раскрасим текст. Итак, здесь мы собираемся, ну, на самом деле, что мы можем сделать, так это начать создавать наш собственный класс, потому что я собираюсь… мы не собираемся оформлять все A-теги как кнопки, верно? Итак, что я собираюсь сделать, так это сразу после кавычек здесь я собираюсь дать ему имя класса «Моя кнопка». Я хочу сказать, что My Button делает несколько вещей. Это совершенно бесполезно сейчас, верно? Можем ли мы избавиться от него? Мы можем, потому что я сказал, что все A-теги должны быть белыми без оформления текста.

Давайте быстро проверим и убедимся, что мы ничего не испортили. Ага, идеально. Итак, My Button нуждается в точке перед ней, и мы собираемся сказать этой кнопке, что мне нужен цвет фона. Цвет фона, я возьму белый. Это как-то разрушит его, верно? Убедитесь, что это точка с запятой в конце, убедитесь, что вы все сохранили, вот и все. Типа разбитый, да? Если вы ничего не видите, это либо вообще не сохранено, либо в вашей кнопке нет текста. Если вы только что отказались от этого, думая, что вернетесь к этому позже, потому что его нельзя увидеть или нет ничего, что можно было бы обернуть, ему нужен какой-то текст в A-теге.

Другое дело, может быть, в зависимости от того, где вы смотрите это, мы не будем касаться этого в следующем видео, но если ваше все еще не появится, и вы как бы застряли там, вам, возможно, придется сделать Display:Inline-block или Display:block. Мы собираемся поговорить об этом в следующем, но это также может вызвать у вас проблемы. Так что сделайте это, это может исправить вашу. У нас все работает нормально, проблема в том, что цвет текста тоже белый. Итак, мы собираемся сделать цвет текста, мы будем использовать этот верхний здесь, из нашего градиента, и это классная вещь в коде VS, он просматривает ваш CSS и говорит: «Эй, вы использовали эти раньше, хотите использовать их снова? Вы можете сказать: «Ага». Сэкономьте мне немного времени, давайте немного посмотрим.

Я также хотел бы сделать его Playfair. Итак, семейство Font, мы хотим Family, мы будем Playfair. На самом деле я не могу вспомнить весь синтаксис для этого. Так что я пойду украду его. Я собираюсь использовать эту функцию поиска, которая называется «Command F» на Mac или «Ctrl F» на ПК, и я наберу «play», много игр, вот оно, Playfair. . Я не могу вспомнить причину, как я, вероятно, мог догадаться, что это Playfair, но я никогда не мог вспомнить, в двух словах это или в одном слове, и помните, если это в двух словах, вокруг него есть эти цитаты. Если в используемом вами шрифте нет двух слов, вокруг него не будет этих кавычек. Так что я просто собираюсь схватить тебя. Давайте посмотрим сейчас.

Выглядит красиво, давайте добавим отступ вокруг. Итак, мы будем делать Паддинг. Теперь мы собираемся сделать наши короткие вещи. Итак, мы собираемся использовать обычный старый Padding, и мы собираемся сделать верх и низ. Я думаю, мы уже обсуждали это раньше, верно? Итак, если вы введете все четыре, получится Верх, и мы используем 11 и 25 пикселей для верха и 25 для правого. Итак, по часовой стрелке, начиная сверху. Мы можем пойти по кругу, но поскольку оси X и Y очень часто совпадают, так что вершины и нижние точки одинаковы, а левая и правая стороны одинаковы, вам не нужно записывать все дополнительный повтор, который там есть. Предполагается, что если их два, вы имеете в виду x и y для первого, извините, вверх и вниз для первого и влево и вправо для второго; это должно работать. Вот так.

Теперь нам нужен небольшой запас над ним, но это не сработает, и мы поговорим об этом подробнее в следующем видео. Таким образом, Margin-top будет иметь 10 пикселей. Я знаю, что ты попробуешь, и это не сработает. Возил меня так же когда я первый раз, когда я работал, что то делал. Так что пока не беспокойтесь об этом, мы вернемся к нему. Есть кое-что, что можно сделать с Display:Inline-block совершенством. На самом деле я собираюсь отделить его для другого видео, но если вы просто хотите это исправить, добавьте поля и просто введите display, потому что я знаю, что все перейдут к следующему видео.

Итак, Display, go Inline-block. Если вы установите это, а теперь сделаете маржу, то она будет работать, но более подробно мы поговорим об этом в следующем видео. Итак, у нас есть Паддинг, у нас есть ты, у нас есть это. Это все, что мы собираемся сделать для этого, потому что у нас есть кнопка, вы нажимаете на нее, и она работает, потому что, ура, новая страница. О, пропало, странно. Так что да, что мы будем делать? Это все для этого, вы можете просто добавить немного поля внизу P-тега, но это не сработает вверху.

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

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