Как сделать цветную кнопку в VS Code с помощью HTML CSS
Привет, мы собираемся сделать кнопку, не уродливую старую кнопку, как эта, а такую красивую кнопку. Не обращайте внимания на верхний отступ, мы исправим это в следующем видео, но у нас есть кнопка, на которую можно нажимать, и у нее красивый фон. Давайте прыгнем и разберемся, как это сделать. Внимание, спойлер, это просто А-тег с отступом, но давайте все равно сделаем это вместе.
Чтобы сделать нашу кнопку, вам, возможно, действительно захочется выяснить, куда мы ее поместим. Я хочу поставить его сразу после этого P-тега здесь. Вот он, Hero Box1, вот мой P-tag. Так что сразу после этого я вставлю, что звучит разумно, есть кнопка. Я собираюсь нажать здесь. Давайте «Сохранить», я собираюсь просмотреть его, и мы получим эту штуку, это своего рода кнопка формы, и это не то, что нам нужно здесь, потому что мы хотим, чтобы это выглядело как макет здесь, и это слишком сложно сделать, используя эту кнопку.
Вы можете немного отформатировать его, чтобы он выглядел так, но проще начать с A-тега, чтобы придать ему отступы и цвет фона. Поэтому мы не будем использовать кнопку. Пойдем и нажмем кнопку, до свидания, кнопку. Все, что нам нужно, это A-тег. Мы использовали это множество раз; куда это пойдет? Давайте на самом деле заставить его пойти куда-нибудь. Я уверен, что вам надоело просто вводить хеш, так что давайте создадим «Файл», «Новую страницу». Я собираюсь сохранить это, оно будет называться моей тестовой страницей. Вы можете сделать ссылку на него по нашим ссылкам прямо сейчас.
Помните, это может быть .html, я вставлю h2, говоря: мы сделали это, новая страница. Я собираюсь закрыть его. Так что я сделал это, закрыл его, и я собираюсь дать ссылку на него сейчас. Так как мы это называем? Тестовая страница. Так что это действительно куда-то идет. Что будет делать эта кнопка? Он предназначен для перехода в раздел «Забронировать онлайн», поэтому между A-тегами мы будем говорить «Забронировать онлайн».
Я хочу, чтобы это было в верхнем регистре? Нет. Итак, мы используем заглавные буквы, и именно так это выглядит в браузере. Вы думаете: «Чем это лучше, чем настоящая уродливая кнопка?» Это легко стилизовать.
Давайте приступим к выполнению этих основ, это зависит от того, пошли ли вы и — помните, ранее мы потенциально стилизовали наш A-тег в заголовке или в CSS, и мы назвали это Сбросом CSS. Это было бы удобно, но я этого не сделал, так что я хочу сказать, что на самом деле я не буду говорить конкретно, я буду говорить довольно широко. Я хочу сказать, что все А-метки здесь наверху… Почему они наверху? Потому что мне кажется, что это очень широкий штрих, поэтому он должен быть вверху. Я хочу сказать, что все 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-тега, но это не сработает вверху. Мы собираемся поговорить о встроенных и блочных элементах в следующем видео, чтобы на самом деле знать, что мы делаем, когда набираем display:inline-block. Сделаем это в следующем видео.
Исправьте кнопки Squarespace 7.1 (фрагменты CSS внутри) — Applet Studio
Справка Squarespace
Автор Ольга Колгушева
Все, что вы можете делать с кнопками в Squarespace, используя собственный редактор и немного пользовательского кода
Совет: хотите улучшить конверсию своего сайта? Используйте больше кнопок и логических призывов к действию.
Squarespace имеет встроенную коллекцию дизайнов кнопок, но иногда они кажутся довольно ограниченными.
Платформа совсем недавно добавила несколько новых форм кнопок — теперь вы можете добавлять овальные, подчеркнутые и лепестковые кнопки (поверх стандартных квадратных, закругленных и пилюль).
Несмотря на то, что мы любим платформу Squarespace за ее простоту, многие кнопки по-прежнему явно отсутствуют. В этом посте мы покажем вам, как оформить кнопки Squarespace с помощью небольшого количества простого пользовательского кода, чтобы сделать ваши кнопки более удобными для конверсии и единообразными на всем вашем веб-сайте.
Понимание того, как кнопки работают в Squarespace 7.1
В Squarespace 7.1 есть четыре типа кнопок:
Кнопка как отдельный блок (ее можно добавить на любую страницу, если щелкнуть знак плюса при редактировании страница)
Кнопка как часть макета изображения, состоящая из изображения, текста и кнопки.
Доступно 5 макетов изображений (карточка, коллаж, перекрытие, постер и стопка). Вы можете добавить их как блок на любую страницу (через меню блоков). Подробнее о том, что вы можете делать с блоками изображений, здесь.Кнопка как часть формы или блока рассылки
Кнопка как часть раздела списка – это тип раздела, который имеет кучу различных настроек для создания макетов
Доступно 5 макетов изображений (карточка, коллаж, перекрытие, постер и стопка). Вы можете добавить их как блок на любую страницу (через меню блоков). Подробнее о том, что вы можете делать с блоками изображений, здесь.Все из этих типов кнопок наследуют основные настройки, которые мы применяем через меню дизайна.
Перейдите в раздел Дизайн → Стили сайта → Кнопки. В этом меню вы можете выбрать форму кнопки, и она будет применяться ко всему вашему сайту. Вы также можете изменить отступы кнопок, и они будут применяться ко всему веб-сайту, за некоторыми исключениями.
Изменение цвета кнопок
В Squarespace 7.1 представлен упрощенный способ применения цветов. Перейдите в раздел Дизайн → Стили сайта → Цвета.
Здесь вы можете настроить цветовую палитру, которая будет автоматически применяться ко всему вашему сайту. Squarespace также создаст 10 тем разделов — 10 уникальных цветовых профилей, которые применяются к разным разделам вашего сайта. Когда вы входите в режим редактирования страницы, щелкните значок пера в правом верхнем углу каждого раздела, вы можете изменить цветовую тему определенного раздела.
Чтобы изменить цвет конкретной кнопки (или любого другого блока), перейдите в раздел Дизайн → Стили сайта → Цвета и нажмите на цветовую тему соответствующего раздела. Вы увидите список блоков и их цветов. Вы можете изменить цвет на любой другой — вы не ограничены исходной палитрой и можете выбрать любой собственный цвет.
Изменение шрифта кнопки
Логика аналогична: Перейдите в раздел Дизайн → Стили сайта → Шрифты. Вы можете настроить мастер-шрифты, которые будут применяться ко всему сайту, а также ко всем кнопкам.
Вы можете настроить кнопки форм и блоков рассылки, выбрав Шрифты → Назначить стили. В этом меню будут отображаться настройки для некоторых других блоков, включая формы. Просто имейте в виду, что вам нужно добавить блок формы на свой сайт, прежде чем получить доступ к этому меню.
Исправление распространенных проблем с кнопками Squarespace с помощью CSS
После того, как мы закончим применять собственные стили к кнопкам, мы обычно обнаруживаем, что наши кнопки несколько несовместимы. Мы хотим, чтобы они вели себя определенным образом — например, чтобы они были одного размера на мобильных устройствах.
Или, например, есть три варианта размера блоков кнопок — маленький, средний и большой — но нет возможности применить к ним разные цвета или отступы, только размер шрифта.
Давайте исправим некоторые из этих проблем с помощью пользовательского кода.
Окрашивание кнопок в разные цвета в зависимости от размера кнопки
Применение разных цветов к сплошным кнопкам в зависимости от размера кнопки. Измените шестнадцатеричный код цвета фона в приведенном ниже фрагменте кода на свой собственный. Вставьте этот код в Дизайн → Пользовательский CSS. Новые цвета будут применяться ко всем темам разделов. Вы можете изменить цвет маленьких, средних и больших кнопок. Если вы хотите изменить цвет текста, вы можете сделать это через панель цветовых тем на вкладке «Дизайн». 9=»sqs-блок-кнопка-контейнер»],
.изображение-кнопка,
.image-button.sqs-динамический текст {
а {
// Маленькие кнопки
&.sqs-блок-кнопка-элемент—маленький {
цвет фона: #FFFFFF;
}
// Средние кнопки
&.
Измените цвет кнопки в блоке рассылки
Измените HEX-код в следующем фрагменте и добавьте его в Дизайн → Пользовательский CSS.
// Кнопки блока рассылки
.newsletter-блок {
.newsletter-form-button-wrapper {
.newsletter-form-button {
цвет: #FFFFFF !важно;
background-color: #FF9230 !важно;
}
}
}
Сделайте все кнопки одинаковой ширины на настольных и мобильных устройствах
Сделайте дизайн более последовательным — сделайте все кнопки одинаковой ширины на мобильных и настольных устройствах. Следующий фрагмент будет применяться ко всем обычным кнопкам, кнопкам макета изображения, а также кнопкам блока новостной рассылки. Вы можете изменить отступы и ширину кнопок на рабочем столе, используя этот код. 9=»sqs-блок-кнопка-контейнер»],
.
изображение-кнопка,
.image-button.sqs-динамический текст {
а {
минимальная ширина: 150 пикселей;
отступы: 1.5rem 4rem !важно;
Экран @media и (максимальная ширина: 768 пикселей) {
padding: 1.5rem 0 !важно;
минимальная ширина: 100%;
ширина: 100%;
}
}
}
// Кнопки блока рассылки
.newsletter-блок {
.newsletter-form-button-wrapper {
Экран @media и (максимальная ширина: 768 пикселей) {
ширина: 100%;
}
.newsletter-form-button {
минимальная ширина: 150 пикселей;
отступы: 1.5rem 4rem !важно;
Экран @media и (максимальная ширина: 768 пикселей) {
padding: 1.5rem 0 !важно;
ширина: 100%;
}
}
}
}
// Кнопки закрытия
Исправление непропорциональных размеров кнопок в макетах изображений
Squarespace 7.1 удален параметр динамического текста для кнопок в макетах изображений (карточка, стопка, коллаж, перекрытие и постер). В результате кнопки по умолчанию в этих блоках обычно выглядят непропорционально большими.
Следующий фрагмент делает несколько вещей:
Изменяет размер шрифта
Применяет минимальную ширину ко всем кнопкам в макетах изображений: 150 пикселей
Применяет новые отступы ко всем кнопкам
Делает все эти кнопки шириной 100% на мобильных устройствах
// Кнопки блокировки карты изображения
.изображение-кнопка,
.image-button.sqs-динамический текст {
размер шрифта: 1.3em !важно;
а {
минимальная ширина: 150 пикселей;
выравнивание текста: по центру;
отступы: 1.5rem 4rem !важно;
Экран @media и (максимальная ширина: 768 пикселей) {
padding: 1.5rem 0 !важно;
минимальная ширина: 100%;
ширина: 100%;
}
}
}
Мы надеемся, что это было полезно! Покажите свои сайты в комментариях ниже.